html部分，主要用到的是ul，li标签
css部分，主要用到的是display：none；a:hover{};
jQuery部分，主要用到的是$().hover();然后通过属性获取内容，并改变display的属性，none，或者block；
代码如下：
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8" />
<title>下拉菜单</title>
<script src="js/jquery-1.11.0.min.js"></script>
<style>
*{padding: 0;margin: 0;font-family: '微软雅黑';}
.nav>li{float: left;list-style: none;margin-left:2px;}
.nav li>a{text-decoration: none;color: #000;display: block;width: 100px;height: 45px;line-height: 45px;text-align: center;background: #ccc;}
.nav li>a:hover{color: #808080;background: #f60;}
.nav{width: 800px;margin:0 auto; }
.sub{display: none;background: #ccc;height: 120px;}
.sub>li{list-style: none;font-size: 16px;}
.sub>li a{height: 23px;line-height: 23px; color: #fff;border-bottom: 1px dashed #fff;display: block;}
.sub>li a:hover{background: #00e500;color: #fff;}
</style>
</head>
<body>
<ul class="nav">
<li>
<a href="#">网站首页</a>
<ul class="sub">
<li><a href="#">二级页面</a></li>
<li><a href="#">二级页面</a></li>
<li><a href="#">二级页面</a></li>
<li><a href="#">二级页面</a></li>
</ul>
</li>
<li>
<a href="#">网站首页</a>
<ul class="sub">
<li><a href="#">二级页面</a></li>
<li><a href="#">二级页面</a></li>
<li><a href="#">二级页面</a></li>
<li><a href="#">二级页面</a></li>
</ul>
</li>
<li>
<a href="#">网站首页</a>
<ul class="sub">
<li><a href="#">二级页面</a></li>
<li><a href="#">二级页面</a></li>
<li><a href="#">二级页面</a></li>
<li><a href="#">二级页面</a></li>
</ul>
</li>
<li>
<a href="#">网站首页</a>
<ul class="sub">
<li><a href="#">二级页面</a></li>
<li><a href="#">二级页面</a></li>
<li><a href="#">二级页面</a></li>
<li><a href="#">二级页面</a></li>
</ul>
</li>
<li>
<a href="#">网站首页</a>
<ul class="sub">
<li><a href="#">二级页面</a></li>
<li><a href="#">二级页面</a></li>
<li><a href="#">二级页面</a></li>
<li><a href="#">二级页面</a></li>
</ul>
</li>
</ul>
<script>
$(document).ready(function(){
$('.nav>li').hover(function(){
$(this).find('.sub').css('display','block');
},function(){
$('.nav>li').find('.sub').css('display','none');
})
})
</script>
</body>
</html>
如遇代码有问题，欢迎指正。
扫一扫
833
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
