jQuery 鼠标触发下拉菜单

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！