Hallo!
Ich versuche gerade eine gute Navigationsleiste (Dropdown) mit JQuery zu erstellen, habe allerdings Probleme.
Das ganze ist in HTML5 programmiert.
HTML
<head>
<link rel="stylesheet" type="text/css" href="css/layout.css">
<link rel="stylesheet" type="text/css" href="css/color.css">
<title>JQuery</title>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('header#page_header nav ul li').hover(
function() { $('ul',this).slidedown(100); },
function() { $('ul',this).slideup(100);
});
});
</script>
</head>
<body>
<header id="page_header">
<img src="images/header.png" id="header_img">
<nav>
<ul>
<li><a href="#">Parent 01</a></li>
<ul>
<li><a href="#">01 Item 01</a></li>
<li><a href="#">01 Item 02</a></li>
<li><a href="#">01 Item 03</a></li>
<li><a href="#">01 Item 04</a></li>
</ul>
<li><a href="#">Parent 02</a></li>
<ul>
<li><a href="#">02 Item 01</a></li>
<li><a href="#">02 Item 02</a></li>
</ul>
<li><a href="#">Parent 03</a></li>
<ul>
<li><a href="#">03 Item 01</a></li>
<li><a href="#">03 Item 02</a></li>
<li><a href="#">03 Item 03</a></li>
</ul>
<li><a href="#">Parent 04</a></li>
<ul>
<li><a href="#">04 Item 01</a></li>
</ul>
</ul>
</nav>
</header>
<section id="posts">
<article class="post">
<header>
..... und so weiterDas Problem was ich habe ist...
1. dass die Navigationsleiste nicht runterklappt und
2. dass wenn man die Submenüs standardmäßig anzeigen lässt, sind nicht die richtigen Submenüs dargestellt.
Code
body{
width: 960px;
margin: auto;
}
header#page_header{
width: 100%;
text-align: center;
margin-top: 40px;
margin-bottom: 30px;
}
header#page_header nav {
display:block;
position:relative;
}
header#page_header nav ul {
padding:0;
margin:0;
}
header#page_header nav li {
float:left;
list-style-type:none;
}
header#page_header nav ul:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
header#page_header nav li a {
display:block;
padding:10px 20px;
}
header#page_header nav ul ul {
display:none;
position:absolute;
top: 39px;
left: -1px;
}
header#page_header nav ul ul li {
float:none;
}
header#page_header nav ul ul a {
padding:10px 20px;
border-left:none;
border-right:none;
font-size:14px;
background-color: #CCCCCC;
width: 150px;
text-align: left;
}Hat jemand eine Idee warum das Ding nicht funktioniert? Bzw. hat jemand schon eine fertige Navibar?
mfg