CSS Drop Line Menu Tutorial

View Demo

I thought it would be fun to produce a Drop Line Menu Like the one on Project Sevens site, but NOT JS dependant! Rather, I wanted to build a Pure CSS Drop Line Menu System - and I did! Nothing new here, they've been built before. Forinstance, Paul O'B has a nice demo of one, and of course, Stu Nicholls has about twenty of them. However, as nice as Stus are (no ones arguing that!), the code behind those menus can be a little intimidating. With all the complicated CSS and ugly CC's in the HTML for >IE7, it's a little much for my taste. So I thought it would be nice, to not only build one using Pure CSS, but also make it pretty, and easy to understand.

Just a couple things to note: This menu system (as others of its kind) is using the li's for part of the hover effect. What that means is, that limits keyboard users. If that makes you sad, then you can fix that little problem by incorporating Matthew Carroll script (just view his source code for clarity). And as usual, IE6 needs some JS to simulate hover on the li's. I used Whatever:hover, although you can use which ever method you'd like! In cases such as this, when the code can get a little complicated, I like to strip it down to the bare bones (completely void of any real styling), so you can "really" see exactly whats going on. The code below is such an example! And that's about it - enjoy!

The CSS

* {
margin:0;
padding:0;
}
#nav {
list-style:none;
height:3.8em;
width:408px;
position:relative;
line-height:1.4em;
}
#nav li {
width:136px;
float:left;
text-align:center;
}
#nav a {
height:1.5em;
display:block;
text-decoration:none;
color:#000;
background:#999;
}
#nav a:active, #nav a:focus, #nav a:hover {
background:#777;
}
/* --------- Sub Nav --------- */
#nav li.current ul {
left:0;
}
#nav ul {
position:absolute;
left:-999em;
width:408px;
list-style:none;
padding:.9em 0 0;
}
#nav ul li {
width:auto;
margin:0 15px 0 0;
}
#nav ul a {
font-size:80%;
height:auto;
padding:0 8px;
}
#nav li:active ul, #nav li:hover ul { 
left:0;
background:#fff;
}

The HTML

<ul id="nav">
  <li class="current"><a href="#">Link1</a>
    <ul>
      <li><a href="#">Sub1</a></li>
      <li><a href="#">Sub1</a></li>
      <li><a href="#">Sub1</a></li>
    </ul>
  </li>
  <li><a href="#">Link2</a>
    <ul>
      <li><a href="#">Sub2</a></li>
      <li><a href="#">Sub2</a></li>
      <li><a href="#">Sub2</a></li>
    </ul>
  </li>
  <li><a href="#">Link3</a>
    <ul>
      <li><a href="#">Sub3</a></li>
      <li><a href="#">Sub3</a></li>
      <li><a href="#">Sub3</a></li>
    </ul>
  </li>
</ul>

ADVERTISE HERE