When we create a drop down menu we want that our menu is lightweighted, fast loading, easy to implement, and also compatible with major browsers.
I am going to define discuss about a CSS drop down menu which has all the qualities stated above. It is a outcome of hardwork we have done few years ago because of quality of such dropdown menus available on net is drastically low. There is no redundant code. You can copy and paste it and also modify it according to your needs.
1. Html Part
The #menucontainer div is our main container div.
<div id=”mainmenu”>
<ul>
<li><a href=”#”>Home</a>
<ul class=”subhome”>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Register</a></li>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Feedback</a></li>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>RSS/XML</a></li>
</ul>
</li>
<li><a href=”#”>News</a>
<ul class=”subnews”>
<li><a href=”#”>Company Briefs</a></li>
<li><a href=”#”>Company Briefs</a></li>
<li><a href=”#”>Defining Moments </a></li>
<li><a href=”#”>Company Briefs</a></li>
<li><a href=”#”>Company Briefs</a></li>
</ul>
</li>
<li><a href=”#”>Advertising</a>
<ul class=”subad”>
<li><a href=”#”>Creative Showcase</a></li>
<li><a href=”#”>Company Briefs</a></li>
<li><a href=”#”>Company Briefs</a></li>
<li><a href=”#”>Company Briefs</a></li>
</ul>
</li>
<li><a href=”#l”>Media</a>
<ul class=”submedia”>
<li><a href=”#”>Company Briefs</a></li>
<li><a href=”#”>Media Newslets</a></li>
<li><a href=”#”>Company Briefs</a></li>
<li><a href=”#”>Company Briefs</a></li>
<li><a href=”#”>Company Briefs</a></li>
</ul>
</li>
<li><a href=”#”>OOH</a>
<ul class=”subooh”>
<li><a href=”#”>News</a></li>
<li><a href=”#”>Company Briefs</a></li>
<li><a href=”#”>Company Briefs</a></li>
</ul></li></ul></div></div>
2. CSS Part
#mainmenu {width:440px; height:25px; position:relative; background:#e4e4e4; margin:0 auto; clear:both; z-index:10000;}
#mainmenu ul { padding:0; margin:0; list-style: none;}
#mainmenu li {float:left; position:relative; border-right:1px solid #CCCCCC;}
#mainmenu a {font: 12px Arial, Helvetica, sans-serif; color:#000; height:25px; padding:9px 14px 9px 14px; line-height:25px; text-decoration:none;}
#mainmenu a:hover {color:#fff; background:#000; }
#mainmenu ul ul {position:absolute; height:auto; display:none; top:25px; background:#fff none; left:0px; border:1px solid #e4e4e4;}
#mainmenu ul ul a {font:12px Arial, Helvetica, sans-serif; padding:1px 0 3px 5px; height:20px; line-height:21px; list-style:none; border-top:none; color:#000; background:#fff none; text-decoration:none; float:left; display:block;}
#mainmenu ul ul a:hover{ height:20px; line-height:21px; color:#fdb813;font-weight:bold;}
.subhome li a{ width:65px;}
.subnews li a{ width:95px;}
.subad li a{ width:100px;}
.submedia li a{ width:105px;}
.subooh li a{ width:90px;}
3. JavaScript Part
paste this javascript in to your body seaction
function showSubMenuItem()
{
var e = this;
for(var i=0; i<e.childNodes.length; i++)
{
var node = e.childNodes[i];
if(node.nodeName == “UL”)
{
node.style.display = “block”;
}
}
}
function hideSubMenuItem()
{
var e = this;
for(var i=0; i<e.childNodes.length; i++)
{
var node = e.childNodes[i];
if(node.nodeName == “UL”)
{
node.style.display = “none”;
}
}
}
var m = document.getElementById(“mainmenu”);
for(var i=0; i<m.childNodes.length; i++)
{
if(m.childNodes[i].nodeName == “UL”)
{
m = m.childNodes[i];
break;
}
}
for(var i=0; i<m.childNodes.length; i++)
{
var node = m.childNodes[i];
if(node.nodeName == “LI”)
{
node.onmouseover = node.onfocus = showSubMenuItem;
node.onmouseout = node.onblur = hideSubMenuItem;
}
}
</script>
To see a Live demo. Click here
To download a demo file. Click here
cheers!!
Joginder Poswal
Great post! I’ve been looking for something like this for a while now.
Also I just tested it in IE 6 and it works great!
yes it will be helpful article. and drop down menu very important now days.
Thanks amit.
nice one i could get here lots of thing same as i want!