Dropdown Navigation

Demo starter files

Creating a Dropdown Hover Menu

Dropdown navigation is one of the longest-standing and well established user interface conventions in computer software. In other words, the vast majority of people viewing your web site intuitively understand that a "menu" reveals more options when either hovered or clicked with a mouse.

Like most things in web design, there are a number of ways to tackle dropdown navigation menus. How you display your navigation (vertically, horizontally, fixed, etc), and how you create this functionality in your code will both vary, but the core concept is always the same. This demo covers two methods, but you should always keep an eye out on the web for new and improved methods.

We will effectively hide all of the drop-down portions of the nav by default, and display them using the :hover pseudo selector in CSS.

Some creative CSS selectors will be required to target the right elements. IDs and classes on every element would add too much clutter to the code and be more difficult to maintain. Imagine renumbering all of your classes when a menu item has to be inserted or reordered.

Instead, we'll leverage the CSS selectors for descendants and children to target the sub-menus.

The Problem with Hover

Not everyone has hover.

For a long time web designers could count on the fact that almost all of their viewership was navigating their sites using a mouse. That is obviously no longer the case, and touch-based input devices inherently do not have a hover state.

So how do we solve this problem? Are users interacting with our pages using a cursor or their finger? Or both, in the case of touchscreen laptops? Do we try to detect what they're using and adapt our code in realtime? Do we try to emulate hover states for people who don't have them, or doesn't that make sense?

The general consensus in interface design right now is basically to allow equally for both, which requires thoughtful planning.

Hover states should be a visual enhancement to the design, and not integral to the web site's function.

  • Style your links so that it's clear they're links before users hover over them.
  • Make sure your site is navigable without access to the dropdown items in your navigation.

That second point warrants an example.

The Home Depot sells a wide variety of products in a whole swath of categories. Plumbing, Electrical, Tools, Lumber...

Each of these categories warrants a top level menu item, but they're so vast it makes sense to have dropdown options for subcategories. Tools > Screwdrivers, Wrenches, Drills, Drill Bits...

A user whose device doesn't have hover states still needs to be able to reach those subcategories. In addition to activating the dropdown menu, the top level menu items should still be clickable to an intermediate page that lists the subcategories.

This effectively makes the entire site navigable without the dropdown menu, and the menu is just a quicker way to access specific parts of the site for users who have the capability.

A clear structure of pages for reaching content like this also has another major virtue - it makes your web site more easily indexed by search engines!

Other Workarounds

While you should always follow these suggestions regardless, there are a few ways to simulate hover states on touch based devices. Some devices have tap-to-hover support baked into their browsers. There are also javascript plugins that detect and add this tap-to-hover state.

Finally, you should always ask yourself, "Is this a necessary feature for this site, or just an added complexity?"