之前写过一篇纯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点击的下拉方式实现。