下拉菜单效果实现代码实例
程序员文章站
2022-03-29 20:42:18
下拉菜单效果实现代码实例
...
下拉菜单效果实现代码实例
<!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-image: url(imgs/bg.jpg);
}
.wrap li{
background-image: url(imgs/libg.jpg);
}
.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="jquery-1.11.1.min.js"></script>
<script>
$(function () {
// 1. 获取到事件源,并绑定鼠标进入事件
$(".wrap > ul > li").mouseenter(function () {
// 让当前一级菜单下面的二级菜单展示出来
$(this).children("ul").show();
});
// 2. 获取到事件源，并绑定鼠标离开事件
$(".wrap > ul > li").mouseleave(function () {
// 让当前一级菜单下面的二级菜单隐藏掉
$(this).children("ul").hide(); // hide() 方法表示：隐藏
});
});
</script>
</head>
<body>
<p class="wrap">
<ul>
<li>
<a href="javascript：void(0);">一级菜单1</a>
<ul>
<li><a href="javascript：void(0);">二级菜单1</a></li>
<li><a href="javascript：void(0);">二级菜单2</a></li>
<li><a href="javascript：void(0);">二级菜单3</a></li>
</ul>
</li>
<li>
<a href="javascript：void(0);">一级菜单1</a>
<ul>
<li><a href="javascript：void(0);">二级菜单1</a></li>
<li><a href="javascript：void(0);">二级菜单2</a></li>
<li><a href="javascript：void(0);">二级菜单3</a></li>
</ul>
</li>
<li>
<a href="javascript：void(0);">一级菜单1</a>
<ul>
<li><a href="javascript：void(0);">二级菜单1</a></li>
<li><a href="javascript：void(0);">二级菜单2</a></li>
<li><a href="javascript：void(0);">二级菜单3</a></li>
</ul>
</li>
</ul>
</p>
</body>
</html>