相信导航栏下拉菜单是web开发最常见的一个item了.这里就不做介绍了，直接上code.
Html部分
<div class="_nav">
<ul id="sddm">
<li><a href="/Home/Index" id="a_nav_Home" class="a_nav_Menu">Home</a>
<div id="nav_Home" class="div_nav_Menu">
</div>
</li>
<li><a href="#" id="a_nav_Employee" class="a_nav_Menu">Employee</a>
<div id="nav_Employee" class="div_nav_Menu">
@Html.ActionLink("Test", "Test", new { area = "BMOManagement", controller = "Test" })
@Html.ActionLink("Test", "Test", new { area = "BMOManagement", controller = "Test" })
@Html.ActionLink("Test", "Test", new { area = "BMOManagement", controller = "Test" })
@Html.ActionLink("Test", "Test", new { area = "BMOManagement", controller = "Test" })
@Html.ActionLink("Test", "Test", new { area = "BMOManagement", controller = "Test" })
</div>
</li>
<li><a href="#" id="a_nav_Billing" class="a_nav_Menu">Billing</a>
<div id="nav_Billing" class="div_nav_Menu">
<a href="#">B Test1</a>
<a href="#">B Test2</a>
</div>
</li>
<li><a href="#" id="a_nav_Forecast" class="a_nav_Menu">Forecast</a>
<div id="nav_Forecast" class="div_nav_Menu">
<a href="#">F Test1</a>
<a href="#">F Test2</a>
<a href="#">F Test3</a>
</div>
</li>
</ul>
</div>
CSS部分
/*********************------------------------------Menu CSS------------------------*********************/
#sddm {
margin: 0 auto;
}
#sddm li {
margin:;
padding:;
list-style: none;
float: left;
font: bold 12px arial;
}
#sddm li a {
display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
width: 60px;
color: #49AB6E;
text-align: center;
text-decoration: none;
}
#sddm li a:hover {
background: #49AB6E;
color: white;
}
#sddm div {
position: absolute;
visibility: hidden;
margin:;
padding:;
}
#sddm div a {
position: relative;
display: block;
margin:;
width: auto;
white-space: nowrap;
text-align: center;
text-decoration: none;
background: #49AB6E;
color: white;
font: 12px arial;
}
#sddm div a:hover {
background: #E5D6B8;
color: white;
}
JS部分
var timeout = 1;
var closetimer = 0;
var ddmenuitem = 0; // close showed layer
function mclose() {
if (ddmenuitem) ddmenuitem.style.visibility = 'hidden';
} // cancel close timer
function mcancelclosetime() {
if (closetimer) {
window.clearTimeout(closetimer);
closetimer = null;
}
} // close layer when click-out
document.onclick = mclose;
// --> $(function () {
// open hidden layer
$(".a_nav_Menu").mouseover(function () {
var currentId = $(this).attr("id"); // cancel close timer
mcancelclosetime(); // close old layer
if (ddmenuitem) ddmenuitem.style.visibility = 'hidden';
$("#" + currentId.replace("a_","")).width($("#" + currentId).parent().width() - 1);
$("#" + currentId).css({ "background": "#49AB6E", "color": "white" }); // get new layer and show it
ddmenuitem = document.getElementById(currentId.replace("a_", ""));
ddmenuitem.style.visibility = 'visible';
}); // go close timer
$(".a_nav_Menu").mouseout(function () {
var currentId = $(this).attr("id");
$("#" + currentId).css({ "background": "", "color": "#49AB6E" }); closetimer = window.setTimeout(mclose, timeout);
}); // go close timer
$(".div_nav_Menu").mouseout(function () {
var currentId = $(this).attr("id");
$("#a_" + currentId).css({ "background": "", "color": "#49AB6E" });
closetimer = window.setTimeout(mclose, timeout);
}); $(".div_nav_Menu").mouseover(function () {
var currentId = $(this).attr("id");
$("#a_" + currentId).css({ "background": "#49AB6E", "color": "white" });
mcancelclosetime();
});
})
这里只是简单实现一下，如果页面要求比较高，可能就不是很实用了，这个只是当时接了一个私活，因为比较注重业务而不是code所以就写的比较快。
作 者：请叫我头头哥
出 处：http://www.cnblogs.com/toutou/
关于作者：专注于基础平台的项目开发。如有问题或建议，请多多赐教！
版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。
特此声明：所有评论和私信都会在第一时间回复。也欢迎园子的大大们指正错误，共同进步。或者直接私信我
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角“推荐”一下。您的鼓励是作者坚持原创和持续写作的最大动力！