#nav-top, #nav-top ul {
padding:0;
margin:0;
list-style-type: none;
}
#nav-top {
margin: 8px 0 8px 15px;
}
#nav-top a, #nav-top a:visited {
color: #ffffff;
font-size: 12px;
line-height: 22px;
background-color: #cc0000;
display: block;
width: 100px;
height: 23px;
text-decoration:none;
text-indent:5px;
border:1px solid #fff;
border-width:0 1px 1px 0;
}
#nav-top li {
float:left;
margin: 0;
padding: 0;
}
#nav-top li:hover {
position:relative;
}
#nav-top li:hover > a {
background:#dfd7ca;
color:#c00;
}
#nav-top li ul {
display: none;
}
#nav-top li:hover > ul {
display:block;
position:absolute;
top: 0;
left: 101px;
}
#nav-top > li:hover > ul {
left: 12px;
top: 24px;
}
#nav-top li ul a, #nav-top li ul a:visited {
font-size: 10px;
color: #cc0000;
background-color: #ffffcc;
}
<ul id="nav-top">
<li><a href="#">Top Level 1</a></li>
<li><a href="#">Top Level 2 »</a>
<ul>
<li><a href="#">Sub-level 2a</a></li>
<li><a href="#">Sub-level 2b</a></li>
<li><a href="#">Sub-level 2c</a>
</ul>
</li>
<li><a href="#">Top Level 3 »</a>
<ul>
<li><a href="#">Sub-level 3a</a></li>
<li><a href="#">Sub-level 3b</a></li>
<li><a href="#">Sub-level 3c »</a>
<ul>
<li><a href="#">Sub-level 2a</a></li>
<li><a href="#">Sub-level 2b »</a>
<ul>
<li><a href="#">Sub-level 3a</a></li>
<li><a href="#">Sub-level 3b »</a>
<ul>
<li><a href="#">Sub-level 4a</a></li>
<li><a href="#">Sub-level 4b</a></li>
<li><a href="#">Sub-level 4c</a></li>
</ul>
</li>
<li><a href="#">Sub-level 3c</a></li>
<li><a href="#">Sub-level 3d</a></li>
</ul>
</li>
<li><a href="#">Sub-level 2c</a></li>
</ul>
</li>
<li><a href="#">Sub-level 3d</a></li>
<li><a href="#">Sub-level 3e</a></li>
</ul>
</li>
<li><a href="#">Top Level 4</a></li>
</ul>
All content not copyright by anyone else is
copyright © 2003–2007 James Walker.
License for use is the GNU Free Documentation License.
Find it:
here in the
License directory
or
at the Free Software Foundation,
www.fsf.org