下拉菜單實現(xiàn)很簡單，純css也能實現(xiàn)，但是我不擅長，用jquery也就兩行代碼，于是就用jquery+css實現(xiàn)簡單二級下拉菜單導航，分享給大家供大家參考，具體內容如下
運行效果圖：
具體代碼：
第一步：確定導航的html格式
<ul id="nav"> <li><a href="#">首頁</a> <ul> <li><a href="#">PHP編程</a></li> <li><a href="#">JAVA編程</a></li> <li><a href="#">RGB對照表</a></li> <li><a href="#">顏色搭配技巧</a></li> </ul> </li> <li><a href="#">欄目一</a> <ul> <li><a href="#">PHP編程</a></li> <li><a href="#">JAVA編程</a></li> <li><a href="#">RGB對照表</a></li> <li><a href="#">顏色搭配技巧</a></li> </ul> </li> <ul>
第二步：CSS實現(xiàn)導航效果
#nav { line-height: 24px; list-style-type: none; background:#666; } #nav a { display: block; width: 100px; text-align:center; } #nav a:link { color:#666; text-decoration:none; } #nav a:visited { color:#666;text-decoration:none; } #nav a:hover { color:#FFF;text-decoration:none;font-weight:bold; } #nav li { float: left; width: 100px; background:#CCC; } #nav li a:hover{ background:#999; } #nav li ul { line-height: 27px; list-style-type: none;text-align:left; width: 180px; position: absolute;display: none; } #nav li ul li{ float: left; width: 180px; background: #F6F6F6; } #nav li ul a{ display: block; width: 156px;text-align:left;padding-left:24px; } #nav li ul a:link { color:#666; text-decoration:none; } #nav li ul a:visited { color:#666;text-decoration:none; } #nav li ul a:hover { color:#F3F3F3;text-decoration:none;font-weight:normal; } 第三步：jquery實現(xiàn)下拉隱藏效果
$(function() { $("#nav li").hover( function() { $(this).find("ul").show(100); }, function() { $(this).find("ul").hide(300); } ); });希望本文所述對大家學習javascript程序設計有所幫助，教大家通過jquery實現(xiàn)二級導航下拉菜單效果。
新聞熱點
疑難解答
