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)

I have the same problem with this code. It works fine in all browsers except internet explorer! Any ideas on how to fix this?

#1: Andrew on 01/10 at 05:33 PM

rendering is off in ie7 btw

#2: neil on 02/07 at 08:43 AM

This works for shit.

Thanks for nothing.

#3: Casey on 03/19 at 04:50 PM

This drop down requires the use of a mouse. Is it possible to drop down on tab?

#4: Johan on 03/26 at 01:58 PM

Above code is not working at IE 7. . overlap the first dropdown the second one. .

#5: frances on 05/01 at 04:09 AM

I want newer codes please :))
bbbbb

#6: hayek on 05/05 at 08:31 PM

Example not working. I have Internet Explorer 7.0 and I cannot access the drop downs when trying to move over to them because they are too far away. The mouse over has gaps of space between the tabs and the drop downs making the drop downs inaccessable when moving away from the tab.

#7: jimbo on 05/16 at 09:32 PM

Is is possible to have dropdown minu we put in css file and if we edit the minu in one css file it take effect to all the pages of our website.

#8: Shaki on 06/10 at 06:46 AM

Is it possible to have dropdown minu in css file and if edit the minu in one css file it take effect to all of our pages

#9: Shaki on 06/10 at 06:50 AM

For scrollbars do overflow: auto; in the CSS, why would ya want that in the menu though? Must be long list

#10: Jesse on 06/11 at 12:24 AM
Commenting is not available in this weblog entry.


Partners & ResourcesOur
Partners


CSS Forums News

Dynamic Drive forums | Register

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