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)

How do i edit this? I'm trying to make it into a menu i am making useing CSS. Can you please look at the followng code and tell me why it wont work? Please>
<!--Javascript-->
<script type="text/javascript"><!--//--><![CDATA[/><!--
startList = function() {
if (document.all&&document;.getElementById) {
menuRoot = document.getElementById("menu");
for (i=0; i<menuRoot.childNodes.length; i++) {
node = menuRoot.childNodes;
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;

//--><!]]>[removed]
<center>
[url="index.htm"]<div class="menuTopBut">Home</div>
<a href="css.htm" id="menu"><div class="menuTopBut">CSS Examples</div>
<ul class="subuls">
<li><a href="">Test[/url]</li>
</ul>
<div class="menuTopBut">Other Examples</div>
[url="submit.htm"]<div class="menuTopBut">Submit</div>
<a href="sitemap.htm"><div class="menuTopBUt">Sitemap</div>
<a href="./xml/about.xml"><div class="menuTopBut">About</div>[/url]
</center>
</div>

#1: Asif on 04/14 at 08:48 PM

How to add scrollbars to dropdown menu

#2: sundar on 06/30 at 04:13 AM

Is it possible to put this menu into an html table?
I'm not having any luck in IE 5.2 but seems okay in Safari....Followed the code to a tee - except added the table.
Please advise.
Thank you.

#3: Kerry on 07/28 at 04:06 PM

startList = function() {

if (document.all&&document;.getElementById) {

navRoot = document.getElementById("cssdropdown");

for (i=0; i<navRoot.childNodes.length; i++) {

node = navRoot.childNodes;

if (node.nodeName=="LI") {

node.onmouseover=function() {

this.className+=" over";

}

node.onmouseout=function() {

this.className=this.className.replace(" over", "");

}

}

}

}

}

window.onload=startList;

#4: Thomas on 08/22 at 04:33 PM

The above code should work for the JS in IE.

#5: Thomas on 08/22 at 04:33 PM

i've tried to execute the above code (css+javascript) it's worked on Mozilla Firefox but didn't work on IE..can you help me?

#6: rama on 09/23 at 06:49 AM

How do i edit this? I'm trying to make it into a menu i am making useing CSS. Can you please look at the followng code and tell me why it wont work? Please>
<!--Javascript-->
<script type="text/javascript"><!--//--><![CDATA[><!--
startList = function() {
if (document.all&&document;.getElementById) {
menuRoot = document.getElementById("menu");
for (i=0; i<menuRoot.childNodes.length; i++) {
node = menuRoot.childNodes;
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;

//--><!]]>[removed]
<center>
[url="index.htm"]<div class="menuTopBut">Home</div>
<a href="css.htm" id="menu"><div class="menuTopBut">CSS Examples</div>
<ul class="subuls">
<li><a href="">Test[/url]</li>
</ul>

#7: lakshmikanth on 10/30 at 08:39 AM

Are there any mulit level CSS drop down menus...anywhere? Any close relatives?

#8: Debbie Walton on 12/19 at 01:23 PM

How do i put the dropdown table on when we initilize the mousehover

#9: Gayathri on 02/09 at 06:05 AM

after testing this css in firefox 1.5.0.1 and ie 6, to get the text to change to the color red, the following rule is needed
li a:hover {text-decoration: underline; color: red;}

#10: codeR on 02/14 at 05:39 AM
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