如何使用HTML和CSS制作下拉菜单
2016-12-29 · 百度知道合伙人官方认证企业
育知同创教育
1【专注：Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址：北京市昌平区三旗百汇物美大卖场2层，微信公众号：yuzhitc】
向TA提问
关注
![]()
展开全部
制作下拉菜单有2种方法：
使用jquery方法实现；实现方法：首先需要引入jquery的版本，引用toggle()的方法，点击当前的一级导航。用this方法来进行当前包含的二级菜单隐藏与显示。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>
</head>
<style>
*{margin: 0; padding: 0;}
ul,li{list-style: none;}
a{text-decoration: none;}
.menu{width: 1000px; margin: 0 auto;}
.menu li{float: left;width: 100px;line-height: 40px; text-align: center;}
.menu li a{display: block; color:red;font-size: 18px;}
.menu-two{display: none;width: 100px;}
.menu li .menu-two a{font-size: 14px;color:#0000FF;}
</style>
<body>
<ul class="menu">
<li><a href="#">一级菜单</a>
<ul class="menu-two">
<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="menu-two">
<li><a href="#">二级菜单</a></li>
<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="menu-two">
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li><a href="#">一级菜单</a>
<ul class="menu-two">
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li><a href="#">一级菜单</a>
<ul class="menu-two">
<li><a href="#">二级菜单</a></li>
</ul>
</li>
</ul>
</body>
<script type="text/javascript">
$(function(){
$(".menu > li a").toggle(
function(e){
$(this).siblings().show();//对当前的.menu>li a的兄弟节点menu-two进行显示
e.preventDefault();//阻止冒泡事件.
},function(e){
$(this).siblings().hide();对当前的.menu>li a的兄弟节点menu-two进行隐藏
e.preventDefault();
}
)
})
</script>
</html>
2.使用css的伪类样式hover实现，html结构上面的一样，只需要把二级菜单进行隐藏(display:none);然后在用hover方式，鼠标移上去让当前隐藏的（.menu-tow）进行（display:block）显示，纯css的方式：
<style>
*{margin: 0; padding: 0;}
ul,li{list-style: none;}
a{text-decoration: none;}
.menu{width: 1000px; margin: 0 auto;}
.menu li{float: left;width: 100px;line-height: 40px; text-align: center;}
.menu li a{display: block; color:red;font-size: 18px;}
.menu-two{display: none;width: 100px;}/***隐藏当前的二级菜单***/
.menu li .menu-two a{font-size: 14px;color:#000;}
.menu li:hover .menu-two{display: block;}/**鼠标的hover伪类事件对.menu-tow进行显示**/
</style>
3.2种方式都可以实现想要的下拉菜单效果，jquery的实现方式与纯css的实现方式均可以，如果需要有个缓动的动画效果，可以在当前的jquery方式下进行修改，纯css的实现需要用css3的属性来实现。都是很酷炫的（PS：css3的效果只支持ie9及以上）。
本回答由电脑网络分类达人 系统推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
