jQuery 鼠标触发下拉菜单

《jQuery 鼠标触发下拉菜单》正文开始，本次阅读大概7分钟。

之前写过一篇纯CSS实现鼠标触发下拉菜单的文章《纯CSS下拉展示（下拉菜单）》

今天再次分享下下拉菜单，实现的方式为：JS+jQuery

HTML：

ulid=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($){
$(#navli).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;}
#navli{float:left;margin-right:6px;position:relative;}
#navliul{display:none;position:absolute;left:0;top:100%;width:200px;list-style:none;}

在制作zblog模板的时候，几乎都需要预写下拉菜单，以方便主题用户自定义，之前写下拉的时候喜欢用纯CSS:hover的方式实现，但使用纯CSS也有弊端，比如安卓上、IOS上就不存在hover，所以以后的主题模板不得不在下拉菜单中使用jQuery，使用click点击的下拉方式实现。