<!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(img/bg.jpg);
}
.wrap li {
background-image: url(img/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>
</head>
<body>
<div class="wrap">
<ul id="menu">
<li>
<a href="javascript:void(0);">一级菜单1</a>
<ul class="ul">
<li>
<a href="javascript:void(0);">二级菜单11</a>
</li>
<li>
<a href="javascript:void(0);">二级菜单12</a>
</li>
<li>
<a href="javascript:void(0);">二级菜单13</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);">一级菜单2</a>
<ul>
<li>
<a href="javascript:void(0);">二级菜单21</a>
</li>
<li>
<a href="javascript:void(0);">二级菜单22</a>
</li>
<li>
<a href="javascript:void(0);">二级菜单23</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);">一级菜单3</a>
<ul>
<li>
<a href="javascript:void(0);">二级菜单31</a>
</li>
<li>
<a href="javascript:void(0);">二级菜单32</a>
</li>
<li>
<a href="javascript:void(0);">二级菜单33</a>
</li>
</ul>
</li>
</ul>
</div>
<script src="lib/jquery-1.12.4.min.js"></script>
<script>
// 给最外层的 li 标签添加事件
var $lis = $(".wrap #menu > li")
// // 鼠标进入,让内部的子级的 ul 进行显示
// $lis.mouseenter(function () {
// $(this).children("ul").show()
// })
// // 鼠标离开,让内部的子级的 ul 进行隐藏
// $lis.mouseleave(function () {
// $(this).children("ul").hide()
// })
// 升级,让它进行运动的显示和隐藏
// 鼠标进入,让内部的子级的 ul 进行显示
$lis.mouseenter(function () {
// 动画开始之前,清空动画排队
$(this).children("ul").stop(true).slideDown(500)
})
// 鼠标离开,让内部的子级的 ul 进行隐藏
$lis.mouseleave(function () {
$(this).children("ul").stop(true).slideUp(500)
})
</script>
</body>
</html>
js 多个动态下拉菜单
转载本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。
上一篇:js - 动态轮播图
下一篇:js案例 - 手风琴轮播图
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
有趣的CSS - 汉堡菜单按钮
用 css 实现汉堡菜单图标与关闭图标过渡动画交互效果。
css 汉堡图标 动画 ux 交互体验 -
JS导航下拉菜单
常用导航下拉菜单:附件是JS做的导航菜单,欢迎下载使用。 导航栏菜单-www.51wi
ASP ASP.net BBS 网页游戏 游戏 -
js模拟下拉菜单
Document 北京 北京 上海 广州 深圳 杭州 西安 ...
下拉菜单 html 点击事件 -
Google Suggest 基于JS的动态下拉菜单
From Google BloG 基本的原理是在当前窗口创建了一个iframe,然后将相关关键词的提示列表在iframe中,
google null function character query -
freemarker页面动态下拉菜单
services中的方法/** * 得到年的下拉列表 */ public SortedMap getYearMap(){ &nb
职场 休闲 freemarker webwork s -
下拉菜单
下拉框
html 下拉菜单 css -
javascript 下拉菜单 js 下拉菜单选中触发事件
$("#num").change(function() { var ff = $("#num").val(); alert(ff) })
javascript 下拉菜单 java jquery