Drop-Down Menu Techniques in Depth

Drop down menus are like parking ramps in that they allow you to “build-up”. Only, instead of building up to support more cars, we are building up to support additional navigation, without the need for additional real estate (screen space). We call them layers, the parking ramps guys call them levels, either way, they both make a lot of sense.

Occasionally though, you get that big ’57 Chevy that just can’t fit into a parking ramp space. The guy who drives that ’57 Chevy is probably the same guy who has disabled JavaScript within his web browser. What happens when we turn off JavaScript? Way to many drop-down menus out there break.

I understand the parking ramp philosophy, why spend the extra million dollars to accommodate the 1/2 of a percent of people who drive 40-foot-long vehicles. But, as far as drop-downs go, the solution is quick and actually requires less time than the alternative JavaScript drop-down menu. That’s right, I’m talking about the pure-CSS menu. Let’s start with the HTML.

The semantic drop-down

<ul id="nav">
  <li>
    <a href="">Parent Link 1</a>
  <ul>
    <li><a href="">Child Link 1</a></li>
    <li><a href="">Child Link 2</a></li>
  </ul>
  </li>
  <li><a href="">Parent Link 2</a></li>
</ul>

This is a language that not only your browser, but search engines understand. Search engines don’t like to pick links out of JavaScript.

To their credit, many JavaScript drop-down menu implementations do operate on HTML markup as shown above. So for the most part, we don’t lose any SEO value with the JavaScript solution. But, as I mentioned before, we DO lose anyone who has disabled JavaScript in their browser settings.

Is that the only group of people we lose? Aren’t they used to making usability sacrifices? Maybe. But, what other problem might a JavaScript-based drop-down introduce? It relies on error-free JavaScript. Not only does your drop-down code have to be error-free, but no other code within the same <script> block can cause any errors. If so, the whole block is cast aside as if it were never executed at all. Both are issues which are easily solved by trading your JavaScript menu for one that is based solely on CSS. Using the HTML above, the following CSS makes for a pretty slick drop-down menu:

#nav, #nav ul { margin: 0; padding: 0; list-style-type: none; }
#nav li { float: left; }
#nav a { display: block; padding: 0 1em;
  line-height: 38px; }</code></li>
#nav a:hover, #nav li:hover a { background: #3353a9; }
#nav li ul { display: none; position: absolute;
  background: #ccc; z-index: 100;
  filter: alpha(opacity = 97); opacity: 0.97; }
#nav li ul li { float: none; }
#nav li ul li a { margin: 0; padding: 0 12px;
  font-size: 12px; font-weight: bold;
  line-height: 30px; color: #000;
  background: #ccc !important; }
#nav li ul li a:hover { background: #eee!important; }
#nav li:hover ul { display: block; }

Drop-Down CSS Explained

1. Remove margins, padding and bullets, which are added by default by all web browsers to unordered list elements (<ul>).
2. By default, list items (<li>) are block-level elements. We want to maintain that, but we also want to show them horizontally. By left-floating them, we’re able to do this.
3. We want to turn the links into block-level elements, so we can give them a line-height. This line-height will be the magic that properly lines up the drop-down menu right below the link. Also, we want to use padding to separate the links, this will allow us to use the :hover style appropriately to give them a different background color when hovered.
4. Optional. Provides the on-hover effect of changing the background color of the link.
5. We want to absolute position the child navigation element, but, more importantly, we want to hide it initially.  If you don’t adjust it’s position with the top or left styles, it will sit nicely below it’s parent link. You might need to adjust the z-index so it floats above all other content. The filter and opacity styles give it a nice touch, allowing just a little bit of the elements behind it to show through, but not enough to obscure the menu.
6. Newer browsers allow us to style only direct descendants with the > selector, but, we want to play it safe, apply a left float to all list items, then remove it from the child list items.
7. Typically, we want the drop-down menu elements to be styled a bit differently than the parent navigation elements. Use the !important directive on the background color, to override any :hover styles.
8. Same deal with the !important directive, only this time, to specify the on-hover background color of the child items.
9. This is where the drop-down part happens. When a parent list item is hovered, we use the display style to show the child list.

HTML 5’s new Nav Element

Why did I even provide an id attribute to the navigation? Why not just wrap it with HTML 5’s new <nav> element, and style appropriately? This goes back to our original problem of usability. Not all browsers support HTML 5 tags, yet, and hence do not support styling of those tags.

That being said, there’s certainly nothing wrong with wrapping the navigation in a <nav> tag to improve the semantic nature of your markup, but don’t depend on it for styling purposes.

Now, add your JavaScript!

You now have a fully functional CSS drop-down menu, and you may not be entirely satisfied with it’s level of coolness. At this point, it’s safe to add JavaScript to make things a bit more jazzy. If a visitor’s browser does not have JS enabled, no harm done, they’ll fall back to your CSS implementation.

I personally like the Smooth Menu.

Another very simple technique that involves just a couple lines of jQuery: Turn your drop-down menu into a slide down menu

Drop-Down Navigation Usability Considerations

I hope now you feel a little more comfortable with creating your own drop-down navigation. It comes in handy, especially when you need a custom solution, many of which deal with usability.

For instance, it’s difficult for a user to access a drop-down navigation menu that is larger than the screen height, or even close to it. You might consider using your new-found knowledge of drop-down styling to produce a two-column drop-down. One assumption I like to make is:

If the browser window is not wide, it probably isn’t tall.

Using this assumption, we can leverage CSS Media Queries to provide a two-column menu, if the user’s browser is less than 800 pixels wide:

<style type="text/css" media="only screen and (max-width: 800px)">
  /* do the two column thing */
</style>