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)

Try it with IE7, something is wrong.

#1: haszz on 11/29 at 05:59 PM

when i place this menu on a moving image like a gif file, it does not show up properly. i mean it disappears without letting us select any option. any help

#2: aman on 12/16 at 05:39 PM

I had implemented this menu on my site months ago and found out recently that the submenu's conflict with the main menu in IE7. I removed the IE fix (see below) in the CSS and the problem was solved.

#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;
}

#3: oracle86 on 01/04 at 06:25 PM

In IE7 the drop downs are not accessible. The first link, the drop down is under the second link. And the second link, the white space between the link and the drop down is such the cursor leave and the drop down closes.

#4: SueJaymes on 06/20 at 11:39 AM

Thanks for the code, have modified it even further to get better looking stuff and update to most recent suckerfish fixes. HTML is the same but change css / js to:

<style type="text/css">
/*###### Start Menu CSS ######*/

#cssdropdown, #cssdropdown ul {
padding:0px;
margin: 0;
list-style: none;
z-index: 9999;
}

#cssdropdown li {
float: left;
position: relative;
z-index: 9999;
}

#cssdropdown li>ul {
top: auto;
}

#cssdropdown li ul {
left: -999em;
}

#cssdropdown li:hover ul, #cssdropdown li:focus ul, #cssdropdown li.sfhover

ul {
left: auto;
display: block;
}



/* Root link formatting */

.mainitems a {
display: block;
padding-right: 10px;
text-decoration: none;
font-weight:bold;
color: #FDED8F;

}

.mainitems a:hover, .mainitems a.sfhover {
color: black;
}


/* Menu box formatting */


#cssdropdown ul {
padding:2px;
}

.subuls {
position: absolute;
margin: 0px;
list-style-type: none;
padding: 2px;
background-color: #FFED88;
border: solid 1px #9D9D9D;

}

.subuls li {
width: 100%;
}


/* Menu link formatting */

.subuls li a {
display: block;
margin: 0;
padding: 2px;
border: 1px solid #FDED8F;
background: #FFF5BF;
font-weight: normal;
font-family: Tahoma;
font-size: 8pt;
color: black;

}

/* Menu link hover formatting */

.subuls li a:hover, .subuls li a.sfhover {
display: block;
padding: 2px;
border: 1px solid #927773;
background: #FFFFFF;
color: black;

}



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


/*###### End Menu CSS ######*/
</style>

<!--//--><![CDATA[/><!--

sfHover = function() {
var sfEls = document.getElementById

("cssdropdown").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls.onmouseover=function() {
this.className+=" sfhover";
}
sfEls.onmouseout=function() {
this.className=this.className.replace(new RegExp("

sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

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

#5: Christopher on 07/11 at 10:56 AM

Awesome work .. just wondering if anyone has got two instances of this menu working in ie6? Can get a single instance working no worries, but two .. cant seem to get it working.

Love your thoughts ..cheers

#6: Sam on 08/02 at 08:50 AM

I know this is a little bit dated, but just came across it and it still works great for me.

thanks

#7: frantz on 08/17 at 04:16 PM

can u ajust the position so it apears in a diffrent position in ie6

#8: myministry on 08/23 at 10:14 PM

Is there anyway to center this css menu within the page? No matter what I do it appears to remain aligned to the left in Internet Explorer. Got it to align to the center fine in Firefox.

#9: Emeric Evans on 10/15 at 01:10 PM

Is this CSS drop down menu perfectly working on flash.

#10: Gaurav on 11/28 at 01:44 PM
Commenting is not available in this weblog entry.


Partners & ResourcesOur
Partners


CSS Forums News

The Latest Comments

All images and content copyright © 2017 CSS Drive. Contact Info | Back to Top
Affiliate Discloser: We receive a commission from purchases through some links on this site