CSS: drop down menu tutorial

A CSS drop down menu is always on the wish list of any CSS developer. Building such a menu is relatively simple. All you need to know are CSS selectors, floating and contextual positioning. This tutorial will explain you how to build a CSS drop down menu in the easiest way I can imagine, that is, by following a step-by-step approach. Let's get started!

Step 1: The markup

We'll use unordered lists to mark up both our main menu and its child sub-menu, which will be contained in a list item with class sub:

<ul id="navigation">

 <li><a href="#">Home</a></li>
 <li class="sub">
 
  <a href="#">About</a>
  
  <ul>
  
   <li><a href="#">Us</a></li>
   <li><a href="#">Our Work</a></li>
   <li><a href="#">Projects</a></li>
  
  </ul>
 
 </li>
 
 <li>
  <a href="#">Contacts</a>
 </li>

</ul>

When a user hovers the item with class sub. our sub-menu will be shown.

Step 2: Styling the main menu

We need to style the main menu first. Also, we need to make sure that only the list items which are directly children of the main menu will be affected. In other words, we don't want to select our sub-menu and its items. For that reason, we'll use the child selector (>):

#navigation {
 margin: 0;
 padding: 0 1em;
 background: #000;
 height: 3em;
 list-style: none;
}

#navigation > li {
 float: left;
 height: 100%;
 margin-right: 0.5em;
 padding: 0 1em;
}

#navigation > li > a {
 float: left;
 height: 100%;
 color: #c60;
 text-decoration: none;
 line-height: 3;
 font-weight: bold;
 text-transform: uppercase;
}

#navigation > li > a:hover {
 color: orange;
 text-decoration: underline;
}

We set an height on the main menu and its items both to contain floats and to avoid any possible problem in Internet Explorer 7. For that reason, even the links have a stated dimension.

Step 3: Creating a contextual positioning

Now we want our sub-menu to always appear under the list item it belongs to. For that reason, we create a contextual positioning on that item:

#navigation > li.sub {
 position: relative;
}

Step 4: Styling the sub-menu

To hide our sub-menu, we'll use negative absolute positioning. We cannot use display: none due to accessibility reasons.

#navigation > li.sub ul {
 width: 10em;
 margin: 0;
 padding: 0.5em 0;
 list-style: none;
 background: #a40;
 position: absolute;
 top: -1000em;
}

#navigation > li.sub ul li {
 width: 90%;
 margin: 0 auto 0.3em auto;
}

#navigation > li.sub ul li a {
 height: 100%;
 display: block;
 padding: 0.4em;
 color: #fff;
 font-weight: bold;
 text-decoration: none;
}

#navigation > li.sub ul li a:hover {
 background: #c60;
 text-decoration: underline;
}

top: -1000em hides our sub-menu from the view without affecting its display role.

Step 5: Showing the sub-menu

To show our sub-menu, we have only to adjust its top property using the height of the list item as its value. In this case, such height is inherited from the main menu and is actually 3em:

#navigation > li.sub:hover ul {
 top: 3em;
}

Demo

Live demo