本文通過代碼實例詳細介紹一下簡單的二級下拉菜單是如何實現的，當然還有更為復雜的二級菜單，不過先學會如何制作簡單的，分享給大家供大家參考，具體內容如下

代碼如下：

下拉菜單

nav a{

text-decoration:none;

}

nav>ul>li{

float:left;

text-align:center;

padding:0 0.5em;

width:120px;

}

nav li ul.sub-menu{

display:none;

padding-left:0 !important;

}

.sub-menu li{color:white;}

.sub-menu li:hover{background-color:black;}

.sub-menu li:hover a{color:white;}

ul{list-style: none;}

$(document).ready(function(){

$('.box> li').hover(function(){

$(this).find('.sub-menu').css('display', 'block');

},function(){

$(this).find('.sub-menu').css('display', 'none');

});

});

• 前端專區
  • jquery教程
  • css教程
  • js教程
• 資源專區
  • 電腦模板下載
  • 手機模板下載
  • 特效下載
• 交流專區
  • 運營交流
  • seo優化
  • 站長交流

希望本文所述對大家學習jquery程序設計有所幫助。

總結

以上是生活随笔為你收集整理的html二级下拉菜单模板,基于jQuery实现二级下拉菜单效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。