CSS Examples 
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>
How to add scrollbars to dropdown menu
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.
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;
The above code should work for the JS in IE.
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?
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>
Are there any mulit level CSS drop down menus...anywhere? Any close relatives?
How do i put the dropdown table on when we initilize the mousehover
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;}
