Super easy 5 minute pure CSS drop down menu tutorial

Orin Shepherd | 07-01-08

Much of the time, drop down menus can be an enormous pain. Way more of a pain than they really should be. When I was freelancing, I used to loathe when someone insisted on a drop down menu since I’m not a programmer and your typical drop down solutions involve all Javascript, a combination of Javascript and CSS or an incredibly convoluted and oftentimes non-standards compliant mix concoction of CSS using hacks and multiple browser-specific style sheets.

So my dad asked me to do a simple Blog site for him, and he really wanted a drop down menu. Not having tackled the problem in a while, I gladly took on the challenge, this time looking for a new, easier way to do it.

This technique doesn’t work in IE6, but it does work in IE7, Firefox 2 and 3, Safari and Opera. All without a whit of Javascript.

There are others who have discovered and use this technique, so I’ve not discovered the lost tomb of Tut or anything like that, but many of the (very few) tutorials I’ve seen on the subject make it seem as if there’s only one very specific case where this can be used or use CSS that’s probably supported by most modern browsers, but not all.

So here goes with my attempt to make this as easy as possible. Because if you google for “CSS drop down”, you’ll still mainly get drop downs that mix CSS with Javascript and that’s not the goal here.

You can see the drop down in action at the unfinished changetheworldproject.com.

Step 1: Set up your list.

ChangetheWorldProject.com is set up on Wordpress, so the page list structure is not readily apparent without using a tool like Firebug for Firefox to see the rendered output of the list. Looking at the template, you would just see <?php wp-list-pages ( ) ?>, which doesn’t give you a whole lot. If you change this to <?php wp-list-pages ('list-li=') ?>, it knocks out the wrapper li and makes things a little easier to work with.

This gives us the list structure of: <ul> (Unordered list wrapper that holds the whole thing together) <li> (List item) <ul><li>Child Element</li></ul> (Child of the list item) </li> </ul>

If you’re not working in Wordpress, you can set up your list any way you want, as long as there’s some way to distinguish the children of the main list from the main list items. So you can use the above example, or you can use something like: <ul> <li class="parentListItem">Main menu item</li> <li class="childListItem">Submenu item</li> </ul>

Step 2: Set up your CSS

Now that you have your list set up how you want it, you’ll want to set up the CSS to make it all work.

The magic that makes this possible is that in modern browsers with advanced CSS2, you can put a :hover on something that normally doesn’t have a hover state. You can then move the hover state around within the cascading style structure to affect other elements other than what’s being hovered over.

The basics of your CSS to make this work should look like this (assuming you’re using the first model from Step 1): ul li ul { display: none; position: absolute; } ul li:hover ul { display: block; } If you’re using the second style of list ordering, it would look like this: ul li.childListItem { display: none; position: absolute; } ul li.parentListIem:hover li.childListItem { display: block; } And then whatever extra styling for ul li.parentListItem to make them sit nicely next to each other. Personally, I like using the ul’s just because they already have a built in structure without having to add anything if you’re using li’s alone.

That’s it.

Really.

You can add whatever other styling you want and you’ll need to probably add a top value to that position: absolute, but as long as you have this structure, it will work.

In the first line, you’re telling the ul li ul that its normal state is to display: none.

In the second line, you’re putting the arbitrary hover state on the parent li and then going a step further, essentially creating a sort of if > then statement that says “If the user is hovering on ul li, then do x to the ul the next level down”. Some people may write this as ul li:hover > ul, which tells it to go to the next ul, but this isn’t necessary and sometimes may cause problems since the > is not always understood by all browsers and browser versions.

Step 3:
There isn’t a step 3. I told you that was it. You will want to add your own CSS around this, but there’s nothing else you need as the core of the drop down. You can also always experiment with this arbitrary hover for all sorts of Javascript-ish hover effects on menus, etc.