相信导航栏下拉菜单是web开发最常见的一个item了.这里就不做介绍了，直接上code.
Html部分
1 <div class="_nav"> 2 <ul id="sddm"> 3 <li><a href="http://www.cnblogs.com//Home/Index" id="a_nav_Home" class="a_nav_Menu">Home</a> 4 <div id="nav_Home" class="div_nav_Menu"> 5 </div> 6 </li> 7 <li><a href="#" id="a_nav_Employee" class="a_nav_Menu">Employee</a> 8 <div id="nav_Employee" class="div_nav_Menu"> 9 @Html.ActionLink("Test", "Test", new { area = "BMOManagement", controller = "Test" })10 @Html.ActionLink("Test", "Test", new { area = "BMOManagement", controller = "Test" })11 @Html.ActionLink("Test", "Test", new { area = "BMOManagement", controller = "Test" })12 @Html.ActionLink("Test", "Test", new { area = "BMOManagement", controller = "Test" })13 @Html.ActionLink("Test", "Test", new { area = "BMOManagement", controller = "Test" })14 </div>15 </li>16 <li><a href="#" id="a_nav_Billing" class="a_nav_Menu">Billing</a>17 <div id="nav_Billing" class="div_nav_Menu">18 <a href="#">B Test1</a>19 <a href="#">B Test2</a>20 </div>21 </li>22 <li><a href="#" id="a_nav_Forecast" class="a_nav_Menu">Forecast</a>23 <div id="nav_Forecast" class="div_nav_Menu">24 <a href="#">F Test1</a>25 <a href="#">F Test2</a>26 <a href="#">F Test3</a>27 </div>28 </li>29 </ul>30 </div>View Code
CSS部分
/*********************------------------------------Menu CSS------------------------*********************/
1 #sddm { 2 margin: 0 auto; 3 } 4 5 #sddm li { 6 margin: 0; 7 padding: 0; 8 list-style: none; 9 float: left;10 font: bold 12px arial;11 }12 13 #sddm li a {14 display: block;15 margin: 0 1px 0 0;16 padding: 4px 10px;17 width: 60px;18 color: #49AB6E;19 text-align: center;20 text-decoration: none;21 }22 23 #sddm li a:hover {24 background: #49AB6E;25 color: white;26 }27 28 #sddm div {29 position: absolute;30 visibility: hidden;31 margin: 0;32 padding: 0;33 }34 35 #sddm div a {36 position: relative;37 display: block;38 margin: 0;39 width: auto;40 white-space: nowrap;41 text-align: center;42 text-decoration: none;43 background: #49AB6E;44 color: white;45 font: 12px arial;46 }47 48 #sddm div a:hover {49 background: #E5D6B8;50 color: white;51 }View Code
JS部分
1 var timeout = 1; 2 var closetimer = 0; 3 var ddmenuitem = 0; 4 5 // close showed layer 6 function mclose() { 7 if (ddmenuitem) ddmenuitem.style.visibility = 'hidden'; 8 } 9 10 // cancel close timer11 function mcancelclosetime() {12 if (closetimer) {13 window.clearTimeout(closetimer);14 closetimer = null;15 }16 }17 18 // close layer when click-out19 document.onclick = mclose;20 // -->21 22 $(function () {23 // open hidden layer24 $(".a_nav_Menu").mouseover(function () {25 var currentId = $(this).attr("id");26 27 // cancel close timer28 mcancelclosetime();29 30 // close old layer31 if (ddmenuitem) ddmenuitem.style.visibility = 'hidden';32 $("#" + currentId.replace("a_","")).width($("#" + currentId).parent().width() - 1);33 $("#" + currentId).css({ "background": "#49AB6E", "color": "white" });34 35 // get new layer and show it36 ddmenuitem = document.getElementById(currentId.replace("a_", ""));37 ddmenuitem.style.visibility = 'visible';38 });39 40 // go close timer41 $(".a_nav_Menu").mouseout(function () {42 var currentId = $(this).attr("id");43 $("#" + currentId).css({ "background": "", "color": "#49AB6E" });44 45 closetimer = window.setTimeout(mclose, timeout);46 });47 48 // go close timer49 $(".div_nav_Menu").mouseout(function () {50 var currentId = $(this).attr("id");51 $("#a_" + currentId).css({ "background": "", "color": "#49AB6E" });52 closetimer = window.setTimeout(mclose, timeout);53 });54 55 $(".div_nav_Menu").mouseover(function () {56 var currentId = $(this).attr("id");57 $("#a_" + currentId).css({ "background": "#49AB6E", "color": "white" });58 mcancelclosetime();59 });60 })View Code
这里只是简单实现一下，如果页面要求比较高，可能就不是很实用了，这个只是当时接了一个私活，因为比较注重业务而不是code所以就写的比较快。
注：本文为原创作品，转载请注入出处
原标题：jq+css+html简单实现导航下拉菜单
关键词：HTML
我知道了 