<!DOCTYPE html>
<html>
<head lang=
"en"
>
<meta charset=
"UTF-8"
>
<title></title>
<style type=
"text/css"
>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrap {
width: 330px;
height: 30px;
margin: 100px auto 0;
padding-left: 10px;
background-color: skyblue;
}
.wrap li {
background-color: skyblue;
}
.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;
}
</style>
<script src=
"http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"
></script>
<script>
$(
function
() {
$(
".wrap>ul>li"
).mouseenter(
function
() {
$(
this
).children(
"ul"
).stop().slideDown(600);
});
$(
".wrap>ul>li"
).mouseleave(
function
() {
$(
this
).children(
"ul"
).stop().slideUp(600);
});
});
</script>
</head>
<body>
<p class=
"wrap"
>
<ul>
<li>
<a href=
"javascript:void(0);"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
>一级菜单1</a>
<ul class=
"ul"
>
<li><a href=
"javascript:void(0);"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
>二级菜单11</a></li>
<li><a href=
"javascript:void(0);"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
>二级菜单12</a></li>
<li><a href=
"javascript:void(0);"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
>二级菜单13</a></li>
</ul>
</li>
<li>
<a href=
"javascript:void(0);"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
>一级菜单2</a>
<ul>
<li><a href=
"javascript:void(0);"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
>二级菜单21</a></li>
<li><a href=
"javascript:void(0);"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
>二级菜单22</a></li>
<li><a href=
"javascript:void(0);"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
>二级菜单23</a></li>
</ul>
</li>
<li>
<a href=
"javascript:void(0);"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
>一级菜单3</a>
<ul>
<li><a href=
"javascript:void(0);"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
>二级菜单31</a></li>
<li><a href=
"javascript:void(0);"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
>二级菜单32</a></li>
<li><a href=
"javascript:void(0);"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
>二级菜单33</a></li>
</ul>
</li>
</ul>
</p>
</body>
</html>