网页下拉菜单的实现
一、什么是网页下拉菜单？
网页下拉菜单就是多级菜单，最为简单的就是二级菜单，如下图所示：![]()
二、网页下拉菜单有那种实现方式？
下拉菜单可以用CSS实现，也可以用JavaScript实现，还可以用JQuery实现。今天我们就来说一下简单用CSS实现下拉菜单：
三、实现过程
众所周知，导航菜单是用ul li标签来实现的。那不妨想象一下，当鼠标经过一级菜单时，二级菜单会显示出来，而鼠标离开时会隐藏。实现的思路就明了了，假设现在静态布局已经做好，只需将显示二级菜单display属性为hidden，将鼠标浮动到一级菜单上时将display属性设置为block即可。
四、具体代码实现
1.html标签代码
<!--
|| navigation.html
|| 导航下拉菜单之CSS实现
|| Created by Coral on 2017/3/4.
|| Copyright © 2017年 Scarborough_Coral. All rights reserved.
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航下拉菜单之CSS实现</title>
<style type="text/css">
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">前端开发</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
</ul>
</li>
<li><a href="#">开发语言</a>
<ul>
<li><a href="#">C语言</a></li>
<li><a href="#">java</a></li>
</ul>
</li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
</body>
</html>
2.CSS代码插入到样式代码
/*初始化全部选择器的margin、padding值*/
* {
margin: 0;
padding: 0;
}
/*设置导航div外包属性*/
#nav {
width: 600px;
height: 40px;
margin: 0 auto;
background: #ccc;
}
/*设置ul的列表样式和行高*/
ul {
list-style: none;
line-height: 40px;
}
/*设置a的文本装饰为none、文本居中对齐、显示为块显示*/
a {
text-decoration: none;
text-align: center;
padding: 0 20px;
color: #000;
display: block;
}
/*设置一级菜单左浮动*/
ul li {
float: left;
}
/*（最重要的一步！！！！！！）二级菜单默认显示为不显示*/
ul li ul li {
float: none;
display: none;
}
/*（最重要的一步！！！！！！）当鼠标经过一级菜单时二级菜单设置为显示*/
ul li:hover li {
display: block
}
/*设置a标签背景*/
ul li ul li a {
background-color: #ccc;
}
/*设置一级菜单经过时背景颜色（这里设置的是全部a标签，由权值覆盖二级标签经过颜色）*/
a:hover {
background-color: #F60;
}
/*设置二级菜单经过时的背景颜色*/
ul li ul li a:hover {
background-color: #0CC;
}以上便是CSS实现网页下拉菜单的具体代码了，这次博客文章就到这里了。如果发现有错，希望您能不吝赐教，在评论区写下您的金玉良言。谢谢各位的支持！