Home

CSS Examples 2-level CSS Drop Down Menu

Date: 12/09/2004 2-level CSS Drop Down Menu

Author: CSS Drive (based on SuckerFish menu)

This is a two level CSS Drop Down menu powered entirely by CSS- well, almost. Since IE (as of IE6) doesn't yet support the ":hover" pseudo class on anything other than links, a little JavaScript is required to bind the menu together in those browsers. Based on the SuckFish menu code, though I've modified it with a few changes and improvements of my own, such as visual styling, and the ability to change the width of the drop down menus individually.


The CSS and JavaScript:

<style type="text/css">

#cssdropdown, #cssdropdown ul {
padding: 0;
margin: 0;
list-style: none;
}

#cssdropdown li {
float: left;
position: relative;
}

.mainitems{
border: 1px solid black;
background-color: #FFEEC6;
}

.mainitems a{
margin-left: 6px;
margin-right: 8px;
text-decoration: none;
}

.subuls{
display: none;
width: 10em;
position: absolute;
top: 1.2em;
left: 0;
background-color: lightyellow;
border: 1px solid black;
}

.subuls li{
width: 100%;
}

.subuls li a{
text-decoration: underline;
}

#cssdropdown li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
}

#cssdropdown li:hover ul, li.over ul { /* lists nested under hovered list items */
display: block;
}

#restofcontent { /*wrap rest of content of the page inside this div*/
clear: left;
}

</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
cssdropdownRoot = document.getElementById("cssdropdown");
for (x=0; x<cssdropdownRoot.childNodes.length; x++) {
node = cssdropdownRoot.childNodes[x];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}

if (window.attachEvent)
window.attachEvent("onload", startList)
else
window.onload=startList;

//--><!]]></script>

The HTML:

<ul id="cssdropdown">

<li class="mainitems">
<a href="http://www.cssdrive.com">CSS Gallery</a>
<ul class="subuls">
<li><a href="">Gordon Mac</a></li>
<li><a href="">Juiced Thoughts</a></li>
<li><a href="">The Daily Flight</a></li>
<li><a href="">GrapeFruit</a></li>
</ul>
</li>

<li class="mainitems">
<a href="http://www.cssdrive.com/index.php/examples/">CSS Examples</a>
<ul class="subuls" style="width: 15em">
<li><a href="">CSS2 Generated Content</a></li>
<li><a href="">Custom scrollbar colors</a></li>
<li><a href="">Markerless and "no indent" Lists</a></li>
</ul>
</li>

</ul>

<div id="restofcontent">
<br />
"
</div>

Comments (46)

your tutorial is supub but i want to see the image of the button how it appear for the following code.
http://www.techbreez.com

#1: ram on 07/11 at 08:18 AM

thanks for this great menu, works perfect for me. It is possible to create an external js file an them import it in my html file?

#2: Toto web hosting on 07/11 at 08:25 PM

Very helpful - I've used similar code for nav but also for "pop-up" menus with embed code that pop up over flash-based video players. Very handy trick in lots of situations.

#3: awatson on 07/15 at 09:06 AM

Thanks for sharing your experience. they work fine and looks more beautiful through little customization.

#4: shopping cart on 07/15 at 11:58 PM

Aghh....

i tried the code from suckerfish menu (about the same code as this one)
and i cannot get it to work in IE7.
The menu, and the submenu shows, but doesnt go away. It stays
and layers over the next submenu that pops out.

but it works in safari and firefox

#5: anonymous on 07/20 at 02:16 AM

Is it possible to get the links to center in the nav section? I've been trying to do this with no luck.

#6: Ben on 07/22 at 06:20 AM

NewsUser
Privileges

Partners & ResourcesOur
Partners


CSS Forums News

Dynamic Drive forums | Register

The Latest Comments

Hosting Coupon Code

Hostgator Hosting at $3.96/mon. Use CSS Drive exclusive coupon code "cssdrive25" for an additional 25% off

All images and content copyright © 2004-2014 CSS Drive. Contact Info | Back to Top