I’ve written recently about the common task of identifying the active menu item based on the current URL using jQuery and, in that same vein, I want to show how you can create a basic drop down menu using HTML and CSS.
Using CSS3 you’re able to perform a wide variety of animations and transformation, unfortunately the browser support for these has lagged, especially in Internet Explorer. In this example, I’ll show you how to create a plain old CSS2 drop down menu that you can use as is, or as a base to build your animations or effects on.
To start off, create the basic HTML layout for your menu using the HTML5 <nav> element and an unordered list. To create a sub-menu, add a nested unordered list inside of a list item. This will give you markup similar to the following:
Next, all you need is the right CSS to make the menu work as expected. The result is not the best looking menu you’ve ever seen, but after you style it up with background images etc. it can be made to look any way you like.
The best part about this technique is that it will work across all major browsers, including aging ones like IE7.