成人精品一区二区三区中文字幕-成人精品一区二区三区-成人精品一级毛片-成人精品亚洲-日本在线视频一区二区-日本在线视频免费

下拉菜單實現很簡單，純css也能實現，但是我不擅長，用jquery也就兩行代碼，于是就用jquery+css實現簡單二級下拉菜單導航，分享給大家供大家參考，具體內容如下

運行效果圖：

具體代碼：
第一步：確定導航的html格式

<ul id="nav"> 
        <li><a >首頁</a> 
          <ul> 
            <li><a >PHP編程</a></li> 
            <li><a >JAVA編程</a></li> 
            <li><a >RGB對照表</a></li> 
            <li><a >顏色搭配技巧</a></li> 
          </ul> 
        </li> 
        <li><a >欄目一</a> 
          <ul> 
            <li><a >PHP編程</a></li> 
            <li><a >JAVA編程</a></li> 
            <li><a >RGB對照表</a></li> 
            <li><a >顏色搭配技巧</a></li> 
          </ul> 
        </li> 
<ul>

第二步：CSS實現導航效果

 #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實現下拉隱藏效果

  $(function() {
        $("#nav li").hover(
            function() {
              $(this).find("ul").show(100);
            },
            function() {
              $(this).find("ul").hide(300);
            }
        );
      });

希望本文所述對大家學習javascript程序設計有所幫助，教大家通過jquery實現二級導航下拉菜單效果。