While this is still a working solution, I made an improved and animated version of this dropdown menu. Check out the CSS3 animated dropdown menu article!
If you’re in a hurry, here’s the result:
As you can see in the following lines, the HTML structure does not contain more than we need, it’s a minimal one and easy to understand.
One more thing, also very important, this is semantic HTML. It’s a logical structure and has a correct meaning, even if styling is totally missing at this point:
Clean and accessible HTML structure
In my example, the “Categories” section is the only one who contains a sub-list, but you can easily add sub-lists to any item.
Quite long list, huh? This is it…
You may have noticed the triangle shape that appears along with the sub-menu. That’s a CSS triangle shape and its purpose is to increase usability for this CSS3 dropdown menu.
It’s made using the
Taming the IE6 “beast”
The sub-menu is displayed when hovering on a
li element. As you already know, IE6 doesn’t support hovering on a non-anchor element.
The above solution requires Jquery. Also, I think this shouldn’t be a problem at all, while, nowadays Jquery is almost “a default” when talking about modern websites.
Target IE6 & IE7 browsers
Besides this Jquery fallback, the above CSS includes some lines specifically for IE6 and IE7:
There are also other IE hacks that won’t pass CSS file validation… If you don’t like it this way, just use conditional comments!
Hope you enjoyed this tutorial, don’t forget to leave a comment!
Just as I promised, the CSS3 dropdown menu is now a multi-level one. Please check the demo page to see the updated version:
I took advantage of some free time and I updated the CSS3 dropdown menu demo: