jQuery实现仿淘宝下拉菜单 jQuery

jQuery实现仿淘宝下拉菜单
首先分析下拉菜单，在淘宝中的商品导航中，将鼠标移入导航栏中显示下拉菜单，当鼠标移除导航栏是隐藏下拉菜单列表；所以很容易联想到使用到jQuery中的事件函数mouseover和mouseout。mouseout事件在鼠标从元素上离开后会触发。mouseover事件会在鼠标移入对象时触发。
首先写出HTML代码：

仿下拉菜单 - 锐客网

一级菜单1
- 二级菜单22
- 二级菜单22
- 二级菜单22

一级菜单1
- 二级菜单22
- 二级菜单22
- 二级菜单22

一级菜单1
- 二级菜单22
- 二级菜单22
- 二级菜单22

写出css样式：
【jQuery实现仿淘宝下拉菜单】
* {
margin: 0;
padding: 0;
}

ul {
list-style: none;
}

.wrap {
width: 330px;
height: 30px;
margin: 100px auto 0;
padding-left: 10px;
background-color: chartreuse;
}

.wrap li {
background-color: cyan;
}

.wrap > ul > li {
float: left;
margin-right: 10px;
position: relative;
}

.wrap a {
display: block;
height: 30px;
width: 100px;
text-decoration: none;
color: #000;
line-height: 30px;
text-align: center;
}

.wrap li ul {
position: absolute;
top: 30px;
display: none;
}

引入jQuery：

分析写出jQuery：

效果图：