之前寫過一篇純CSS實現鼠標觸發下拉菜單的文章《純CSS下拉展示（下拉菜單）》

今天再次分享下下拉菜單，實現的方式為：JS+jQuery

HTML：

<ul id="nav">
  <li>菜單1
   <ul>
    <li>子菜單1</li>
    <li>子菜單2</li>
    <li>子菜單3</li>
    <li>子菜單4</li>
   </ul>
  </li>
  <li>菜單2</li>
  <li>菜單3</li>
  <li>菜單4</li>
  <li>菜單5</li>
 </ul>

jQuery：

jQuery(function($) {
 $('#nav li').hover(function() {
  $('ul', this).slideDown(100)
 },
 function() {
  $('ul', this).slideUp(100)
 });
});

CSS：

*{margin: 0;padding: 0;}
 #nav{list-style: none;margin-left: 100px; margin-top: 100px;}
 #nav>li{float: left; margin-right: 6px;position: relative;}
 #nav>li ul{display: none; position: absolute;left: 0;top: 100%;width: 200px; list-style: none;}

在制作zblog模板的時候，幾乎都需要預寫下拉菜單，以方便主題用戶自定義，之前寫下拉的時候喜歡用純CSS:hover的方式實現，但使用純CSS也有弊端，比如安卓上、IOS上就不存在hover，所以以后的主題模板不得不在下拉菜單中使用jQuery，使用click點擊的下拉方式實現。