Hey,
Ik ben dus bezig voor mijn werk met een nieuwe website, alleen ik krijg het submenu maar niet goed werkend.
In Chrome komt het submenu gewoon onder de goede tekst, alleen in IE en Firefox komt ie elke keer onder "Home".
Dit is de html code voor het menu:
Css code:
En als laatste de Jquery code:
Hopelijk snappen jullie met wat ik bedoel.
Alvast bedankt,
Jeffrey
Ik ben dus bezig voor mijn werk met een nieuwe website, alleen ik krijg het submenu maar niet goed werkend.
In Chrome komt het submenu gewoon onder de goede tekst, alleen in IE en Firefox komt ie elke keer onder "Home".
Dit is de html code voor het menu:
Code:
<div id="menu">
<ul>
<li><a href="index.php">Home</a>
<ul>
<li><a href="sub/">Iets</a></li>
<li><a href="sub/">Iets</a></li>
<li><a href="sub/">Iets</a>
</ul>
</li>
<li><a href="produten/">Producten</a>
<ul>
<li><a href="#">Iets</a></li>
<li><a href="#">Iets</a></li>
<li><a href="#">Iets</a></li>
<li><a href="#">Iets</a></li>
</ul>
</li>
<li><a href="#">Iets</a>
<ul>
<li><a href="#">Iets</a></li>
<li><a href="#">Iets</a></li>
<li><a href="#">Iets</a></li>
</ul>
</li>
<li><a href="#">Iets</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div>
Css code:
Code:
#menu {
width:1350px;
margin:27px auto;
}
#menu ul {
float:right;
}
#menu ul li {
display:inline;
padding:8px 15px;
position:relative;
}
#menu ul li a {
text-decoration:none;
color:#00F;
font-size:20px;
}
#menu ul li ul {
display:block;
list-style:none;
position:absolute;
z-index:999;
clear:both;
width:170px;
margin-top:9px;
margin-left:5px;
background-color:#FDFDFD;
border-bottom:2px solid #03F;
border-radius:4px;
}
#menu ul li ul li {
display:block;
margin:0;
padding:8px;
}
#menu ul li ul li a {
font-size:19px;
display:block;
}
En als laatste de Jquery code:
Code:
$(document).ready(function() {
$('#menu ul li ul').hide();
$('#menu ul li').hover( function() {
$(this).find('ul:first').slideDown('slow');
},
function() {
$(this).find('ul').slideUp('fast'); });
});
Hopelijk snappen jullie met wat ik bedoel.
Alvast bedankt,
Jeffrey