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)

Guys, this is all dull. Can you imagine I could make a 2 level CSS-based menu with NO SCRIPTS used at all! As soon as our company releases that site, I'll showcase it to you. Believe me, I tried it in IE6, Opera8.5 and Firefox 1.5 - it works the same way, SCRIPTLESS!

#1: Eugene RIMMER Efimochkin on 03/10 at 07:33 AM

I published a method that did not require javascript back in 2004. I have recently updated to make the css and html simpler
http://www.cssplay.co.uk/menus/dd_valid.html
This is totally scriptless.
I also have a flyout version.

#2: Stu on 03/20 at 09:11 AM

The design maybe is little of :)
But ofcourse nice structure.

#3: NeboN on 03/25 at 05:14 PM

The dropdown of the left hand menu item is displayed behind the right hand menu item in IE 7. I know it's in beta but unfortunately will be the most widely used browser some time in the future.

#4: Neil on 05/08 at 01:26 PM

I tried to put the code in Ie BUT only the first item shows.
Here is my code.
<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) {

navRoot = document.getElementById("cssdropdown");

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

node = navRoot.childNodes[i];

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

node.onmouseover=function() {

this.className+=" over";

}

node.onmouseout=function() {

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

}

}

}

}

}

window.onload=startList;


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

//--><!]]>

<body>
<div>
<table width="450" border="0" cellspacing="0" cellpadding="0">
<tr>
<td > <li class="mainitems">
CSS Gallery
<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></td>
<td id="cssdropdown" > <li class="mainitems">
CSS Gallery
<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></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>

#5: michou on 05/09 at 06:55 PM

Hi, I'm currently having a problem which I've faced for 3 days. I urgently need some help here. Below are the codes n css style. Please advise on what's wrong. Thanks in advance!

Codes:
<tr bgcolor="#cc0000">
<td height="36" colspan="5" valign="middle">
<div id="navcontainer">
<ul id="nav">
<li>Home</li>
<li>About Us ></li>
<ul>
<li>History</li>
<li>Letter from The Club President ></li>
<ul>
<li>2006-2007 Committee</li>
<li>Immediate Past Committee</li>
</ul>
<li>Letter from The Consul-General</li>
</ul>
<li>News ></li>
<ul>
<li>News & Upcoming Events ></li>
<ul>
<li>Monthly Calendar of Events</li>
</ul>
<li>Current News</li>
</ul>
<li>Past Events ></li>
<ul>
<li>2006</li>
<li>2005</li>
<li>2004</li>
</ul>
<li>Membership ></li>
<ul>
<li>Types of Membership</li>
<li>Benefits</li>
<li>Apply Now!</li>
<li>Directory ></li>
<ul>
<li>2003-2004</li>
<li>2004-2005</li>
<li>2005-2006</li>
</ul></ul>
<li>Sponsors</li>
<li>Partners</li>
<li>Contact Us</li>
<li>Site Map</li>
</ul>
</div>
</td>
</tr>

CSS:

#navcontainer
{
background: #CC0000;
margin: 0 auto;
padding: 1em 0 0 0;
font-family: georgia, serif;
height: 35px;
}

/* to stretch the container div to contain floated list */
#navcontainer:after
{
content: ".";
display: block;
line-height: 1px;
font-size: 1px;
clear: both;
}

#nav, #nav ul
{
list-style: none;
padding: 0;
margin: 0;
width: 98%;
font-size: 0.92em;
text-align: center;
background: #cc0000;
line-height: 1;
}

#nav ul
{
position: absolute;
top: 0;
left: 100%;
}

#nav ul ul
{
position: absolute;
z-index: 500;
}

#nav a
{
display: block;
width: 10em;
}

#nav li
{
display: block;
float: left;
width: 8em;
margin: 0;
padding: 0;
position: relative;
}

#nav li ul
{
position: absolute;
left: -999em;
width: 10em;
display: none;
}

#nav li:hover ul
{
left: auto;
}

sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover);

#nav li ul
{
left: auto;
display: none;
}

#nav li>ul
{
top: auto;
left: auto;
}

#nav li a
{
display: block;
width: 100%;
padding: 0.5em;
border-width: 2px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
color: #777;
text-decoration: none;
background: #f7f2ea;
}

#navcontainer>#nav li a { width: auto; }

#nav li#active a
{
background: #f0e7d7;
color: #800000;
}

#nav li a:hover, #nav li#active a:hover
{
color: #800000;
background: transparent;
border-color: #aaab9c #fff #fff #ccc;
}

#nav li:hover > ul {
display: block;
}

#nav li:hover ul, li.over ul{ display: block; }


#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul
{
left: -999em;
display: block;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
display: block
}

#nav li:hover ul, #nav li.sfhover ul {
left: auto;
display: none;
}

#nav li ul ul {
margin: -1em 0 0 10em;
display: none;
}

#nav li:hover ul ul, #nav li.sfhover ul ul {
left: -999em;
display: block;
}

#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {
left: auto;
display: block;
}

#6: Serene on 06/27 at 07:33 PM

How would you make a two-level CSS menu where BOTH levels are horizontal, not just one.

#7: Dual Menu on 06/29 at 08:27 AM

The two-level drop down menu is great. I have one question which is puzzling me: how can you control the position of the menu on the page (or in a table) - i.e. left, center or right. I can`t make this work in IE6. It just remains aligned left.

#8: buddy on 07/18 at 01:02 AM

Nice block of code, a few simple mods, and I can get it the way I want it. but somthing eludes me, when I shrink the window dow, the bars colaps from side by side to one above the other, how can I stop this!
Regards

#9: Geoffrey on 09/27 at 01:59 AM

how do I change the horizontal positioning of the drop down menu. I'm working with a backgound layer and need the nav bar to be positioned left:22px; top:255px. When I try to change the positoning from relative to absolute with the above cooridinates the drop down items stack on top of each other.

#10: denise on 09/27 at 10:23 AM


NewsUser
Privileges

Partners & ResourcesOur
Partners


CSS Forums News

Dynamic Drive forums | Register

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