Een menu dat openklapt als je over het bovenliggend navigatie item hovert. Dat is het doel, maar niet altijd eenvoudig te realiseren. Volgende CSS Snippet is een crossbrowser eenvoudig dropdown menu dat met een beetje JavaScript zelf in Internet Explorer 6 werkt.

HTML

<ul id="navbar">
<li><a href="#">Item One</a>
<ul>
<li><a href="#">Subitem One</a></li>
<li><a href="#">Second Subitem</a></li>
<li><a href="#">Numero Tres</a></li>
</ul>
</li>
<li><a href="#">Item two</a>
<ul>
<li><a href="#">Subitem One</a></li>
<li><a href="#">Second Subitem</a></li>
<li><a href="#">Numero Tres</a></li>
</ul>
</li>
</ul>

CSS

#navbar {
margin: 0;
padding: 0;
height: 1em;
}
#navbar li {
list-style: none;
float: left;
}
#navbar li a {
display: block;
padding: 3px 8px;
background-color: #5e8ce9;
color: #fff;
text-decoration: none;
}
#navbar li ul {
display: none;
width: 10em;
background-color: #69f;
}
#navbar li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
}
#navbar li:hover li {
float: none;
}
#navbar li:hover li a {
background-color: #69f;
border-bottom: 1px solid #fff;
color: #000;
}
#navbar li li a:hover {
background-color: #8db3ff;
}

JavaScript

<![CDATA[
sfHover = function() {
var sfEls = document.getElementById("navbar").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
]]>

De CSS dient aangepast te worden voor IE6

De class .hover moet nu bij elke :hover worden bijgezet, dus eigenlijk 2 maal hetzelfde schrijven maar nu met een . i.p.v. :

CSS

#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
}
#navbar li:hover li, #navbar li.hover li {
float: none;
}
#navbar li:hover li a, #navbar li.hover li a {
background-color: #69f;
border-bottom: 1px solid #fff;
color: #000;
}