Creating a Dropdown Menu with HTML & CSS

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.

There are so many variations of drop down menus these days, most involving JavaScript to perform some type of animation or loading effect. A basic and properly structured HTML/CSS drop down menu can serve you just as well. In fact, it may make your site appear more responsive to not use animations and instantly display the menu instead.

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.