JQuery 实现二级下拉菜单
来源：互联网 发布：在淘宝抢手机怎么最快 编辑：程序博客网 时间：2024/05/01 02:56
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery二级导航菜单</title>
<script language="javascript" src="jquery1.7.js"></script>
<script language="javascript">
$(function () {
$('#nav li').mousemove(function () {
$(this).find('ul').slideDown("slow");
});
$('#nav li').mouseleave(function () {
$(this).find('ul').slideUp("slow");
});
});
</script>
<style type="text/css">
#nav li{
width:100px;height:50px;float:left;background:#000;text-align:center;line-height:50px;border-radius:5px;list-style:none;
box-shadow: 5px 5px 5px #000000; margin-right:5px;*_margin:0;
}
#nav a:link,#nav a:visited{
color:#fff;text-decoration:none;font-size:14px;font-weight:bolder;display:block;
}
#nav a:hover{
color:#000;background:#fff;
}
#nav ul li ul{
clear:both;padding:0;margin:0;
}
#nav ul li ul li{
list-style:none;float:none;margin-bottom:5px;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">first li</a>
<ul style="display:none">
<li><a href="#">a1 li</a></li>
<li><a href="#">b1 li</a></li>
<li><a href="#">c1 li</a></li>
<li><a href="#">d1 li</a></li>
</ul>
</li>
<li><a href="#">second li</a>
<ul style="display:none">
<li><a href="#">a2 li</a></li>
<li><a href="#">b2 li</a></li>
<li><a href="#">c2 li</a></li>
<li><a href="#">d2 li</a></li>
</ul>
</li>
<li><a href="#">third li</a>
<ul style="display:none">
<li><a href="#">a3 li</a></li>
<li><a href="#">b3 li</a></li>
<li><a href="#">c3 li</a></li>
<li><a href="#">d3 li</a></li>
</ul>
</li>
<li><a href="#">fourth li</a>
<ul style="display:none">
<li><a href="#">a4 li</a></li>
<li><a href="#">b4 li</a></li>
<li><a href="#">c4 li</a></li>
<li><a href="#">d4 li</a></li>
</ul>
</li>
<li ><a href="#">fifth li</a>
<ul style="display:none">
<li><a href="#">a5 li</a></li>
<li><a href="#">b5 li</a></li>
<li><a href="#">c5 li</a></li>
<li><a href="#">d5 li</a></li>
</ul>
</li>
</ul>
</div>
</body>
- JQuery 实现二级下拉菜单
- 利用Jquery实现二级下拉菜单
- jquery实现二级菜单下拉效果
- jquery实现二级导航下拉菜单效果
- jquery二级联动下拉菜单
- Jquery+CSS完美实现二级下拉菜单(兼容所有浏览器)
- jQuery+PHP+MySQL实现二级联动下拉菜单
- jQuery+PHP+MySQL实现二级联动下拉菜单
- jquery实现二级菜单
- 二级下拉菜单实现代码
- jquery垂直弹性下拉二级菜单
- jquery 实现下拉菜单
- JQUERY实现下拉菜单
- 纯css实现二级下拉菜单
- Javascript实现简单的下拉二级菜单
- 纯css实现二级下拉菜单
- jq实现二级下拉菜单动画效果
- jQuery二级下拉菜单 下拉箭头翻转动画
- XMLHttpRequest详情之GET和POST(二)
- python 2 & python 3
- 我大学剩下一年半的生活（十六）——pythonchallenge之level15
- Linux内核信号处理机制介绍
- simple factory(简单工厂)
- JQuery 实现二级下拉菜单
- Android 2.3 SD卡挂载流程浅析(六)
- 监听键盘
- JQuery基本选择器
- gpio函数
- xstream:Invalid byte 2 of 2-byte UTF-8 sequence
- Android 2.3 SD卡挂载流程浅析(七)
- 。
- 算法与数据结构--拓扑排序
