CSS Drop Down Menu Tutorial
Let's face it, CSS Drop Downs are not the easiest thing to wrap your brain around. With all the nested ul's and li's, heck I even get confused. Not to mention, all the cross browser compatibility issues that arise. That's one of the reasons for the sudden emergence of all the JS driven Drop Downs. Don't get me wrong, some of the JS dependent Drop Downs are nice, but what happens when JS is off? Your site is unnavigable, that's what! That's not OK (or shouldn't be at least) - so CSS it is then!
Below you will find four CSS Drop Down menu examples - a single drop, a double drop, a triple drop, and one just to see if I could! Did I say Drop Downs were hard - NOT THESE PUPPIES! These are the easiest, cleanest, hack free, and complete, CSS Drop Downs around. I'm really happy with the way they turned out!
Just a couple things to note: This menu system (as others of its kind) is using the li's for the hover effect. What that means is, that leaves keyboard users out in the cold. If that makes you sad, then you can fix that little problem by incorporating Matthew Carroll script (just view his source code for clarity). And as usual, IE6 needs some JS to simulate hover on the li's. I used Whatever:hover, although you can use which ever method you'd like! Just view the source code in the examples below - it will all become very clear! And that's about it - enjoy!
For some, the above examples can get a little complicated. So here is a stripped down version of the Single Drop Down Menu, completely void of any real styling, so you can "really" see exactly whats going on. After all, as I'm sometimes painfully aware of myself (e.g. PHP), if you can't completely understand how something works (in this case a Drop Down Menu), it can be very difficult, if not impossible, to seemlessly implement it into your own design.
The CSS
* {
margin:0;
padding:0;
}
#nav {
list-style:none;
height:2em;
}
#nav li {
position:relative;
float:left;
width:192px;
background:#999;
text-align:center;
}
#nav li:hover {
background:#777;
}
#nav a {
display:block;
color:#000;
text-decoration:none;
line-height:2em;
}
/* --------- Drop Down -------- */
#nav ul {
position:absolute;
left:-999em;
top:2em;
list-style:none;
}
#nav li:hover ul {
left:0;
top:auto;
}
The HTML
<ul id="nav">
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a>
<ul>
<li><a href="#">Drop1</a></li>
<li><a href="#">Drop2</a></li>
<li><a href="#">Drop3</a></li>
</ul>
</li>
<li><a href="#">Link3</a></li>
</ul>
