Drop down menus are a frequent frustration for web developers (as I'm sure you know) but I don't want you to suffer, which is why I'm breaking down my menu for you. It's clean, it's cross browser compatible and it's exactly what you need.
The HTML
The HTML is the easy part, just a basic nested list with some added tags to mark the first and last children.
<ul>
<li class="first_child"><a href="#"><span>Expandable Item</span></a>
<ul>
<li class="first_child"><a href="#"><span>Expandable Item</span></a>
<ul>
<li class="first_child"><a href="#"><span>Item</span></a></li>
<li><a href="#"><span>Item</span></a></li>
<li><a href="#"><span>Item</span></a></li>
<li><a href="#"><span>Item</span></a></li>
<li><a href="#"><span>Item</span></a></li>
<li><a href="#"><span>Item</span></a></li>
<li class="last_child"><a href="#"><span>Item</span></a></li>
</ul>
</li>
<li><a href="#"><span>Item</span></a></li>
<li class="last_child"><a href="#"><span>Item</span></a></li>
</ul>
</li>
<li><a href="#"><span>Item</span></a></li>
<li><a href="#"><span>Item</span></a></li>
<li><a href="#"><span>Item</span></a></li>
<li><a href="#"><span>Item</span></a></li>
<li><a href="#"><span>Item</span></a></li>
<li><a href="#"><span>Item</span></a></li>
<li><a href="#"><span>Item</span></a></li>
<li class="last_child"><a href="#"><span>Item</span></a></li>
</ul>
</div>
The CSS
Here is where it gets a little more advanced, drop down CSS is finicky and hard to craft, but you can cut and past, mess with my padding and backgrounds and have something up and running in no time.
/* ---------- Main Navigation --------- */
/* ---- First Level ---- */
#mainnav {
margin:0;
padding:5px 0;
height:25px;
background: #2e4185;
z-index:99;
-webkit-border-radius: 3px; /* for Safari */
-moz-border-radius: 3px; /* for Firefox */
width:900px;
}
#mainnav ul, #mainnav ul ul {
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:25px;
}
#mainnav ul li {
float:left;
position:relative;
z-index: 99;
}
#mainnav ul li a {
color:#ffffff;
font:12px Arial, Helvetica, sans-serif;
padding: 5px 15px 6px 15px;
text-transform:none;
text-decoration:none;
display:block;
line-height:14px;
border-right:1px solid #FFF;
z-index:99;
}
#mainnav ul li a:hover {
color:#FF9;
}
#mainnav ul .first_child a {}
#mainnav ul .last_child a {}
/* ---- Second Level ---- */
#mainnav ul li ul {
position:absolute;
display:none;
width:200px;
top:25px;
background:#FFF;
padding:0px;
border:solid #333;
border-width:1px 1px 1px 1px;
z-index:100;/*_margin-left:-100px;*/
-webkit-border-radius: 3px; /* for Safari */
-moz-border-radius: 3px; /* for Firefox */
}
#mainnav ul li ul a {
background:#FFF;
padding:8px 0 8px 10px;
line-height:20px;
font:12px Arial, Helvetica, sans-serif;
line-height:12px;
color:#2e4185;
float:left;
width:190px;
text-transform:none;
text-align:left;
border:solid #333;
border-width:0 0 1px 0;
z-index:100!important;
}
#mainnav ul li ul li {
float:left;
}
#mainnav ul li ul li a:hover {
background:#ECECEC;
color:#333;
}
#mainnav ul li ul .last_child a {
border-bottom:none;
}
/* ---- Third Level ---- */
#mainnav ul ul ul {
top:auto;
left:150px;
top:10px;
}
#mainnav ul ul ul li {}
#mainnav ul ul ul li a {}
#mainnav ul ul ul li a:hover {}
/* ----- Hide sub-levels ----- */
#mainnav ul li:hover ul ul, #mainnav ul li:hover ul ul ul, #mainnav ul li:hover ul ul ul ul {
display:none;
}
Finally a little JS
Include jQuery to do your heavy lifting:
Then add the menu script (you should never need to edit this except to alter the transition timing to your liking).
jQuery.noConflict();
function mainmenu(){
var zdex;
jQuery(" #mainnav ul ul ").css({display: "none"}); // Opera Fix
jQuery(" #mainnav ul li").hover(function(){
zdex = jQuery(this).css("z-index");
jQuery(this).css({"z-index":"1000"});
jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
},function(){
jQuery(this).css({"z-index": zdex});
jQuery(this).find('ul:first').css({visibility: "hidden",});
});
}
jQuery(document).ready(function(){
mainmenu();
});
View the whole thing in action/grab the complete source here
