css鼠标悬浮二级下拉导航菜单
分类：实例代码
本章节分享一段代码实例，它实现了鼠标悬浮出现二级下拉导航菜单的功能。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #ccc;
}
#nav {
background-color: #0593d3;
width: 698px;
height: 40px;
margin: 100px auto;
border: 1px solid #fff;
}
ul {
list-style: none;
}
ul li {
position: relative;
float: left;
line-height: 40px;
text-align: center;
border-left: 1px solid #fff;
}
a {
text-decoration: none;
display: block;
color: #fff;
padding: 0 15px;
height: 40px;
}
a:hover {
color: #000;
background-color: #77b6f9;
}
ul li ul {
position: absolute;
left: 0;
top: 40px;
display: none;
}
ul li ul li {
float: none;
background-color: #0593d3;
margin-top: 2px;
}
ul li ul li a {
width: 120px;
}
ul li:hover ul {
display: block;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">犀牛前端部落</a></li>
<li>
<a href="#">前端专区</a>
<ul>
<li><a href="#">css教程</a></li>
<li><a href="#">div教程</a></li>
</ul>
</li>
<li>
<a href="#">资源下载</a>
<ul>
<li><a href="#">特效下载</a></li>
<li><a href="#">图片下载</a></li>
</ul>
</li>
<li><a href="#">js教程</a></li>
<li><a href="#">json教程</a></li>
<li><a href="#">正则表达式教程</a></li>
</ul>
</div>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
* {
margin: 0;
padding: 0;
}
上面的代码实现了简单的css重置功能，将外边距和内边距全部设置为0。
更全面的可以参阅css预重置样式代码一章节。
body {
background-color: #ccc;
}
设置页面背景颜色。
#nav {
background-color: #0593d3;
width: 698px;
height: 40px;
margin: 100px auto;
border: 1px solid #fff;
}
上面的代码是设置导航栏容器的样式。
比如背景颜色，宽度高度，还有水平居中等。
border: 1px solid #fff这个实现白色边框效果。
ul {
list-style: none;
}
去掉列表自带的样式。
ul li {
position: relative;
float: left;
line-height: 40px;
text-align: center;
border-left: 1px solid #fff;
}
上面的代码设置li为相对定位
并且左浮动，这就实现了主导航的水平排列。
line-height: 40px能够设置文本垂直居中，这个和#nav的height属性是对应的。
a {
text-decoration: none;
display: block;
color: #fff;
padding: 0 15px;
height: 40px;
}
上面的代码可以将链接a底部的瞎话先去掉。
并且设置其为块级元素，这样就可以设置它的尺寸。
a:hover {
color: #000;
background-color: #77b6f9;
}
上面的代码设置鼠标悬浮于链接上的样式。
ul li ul {
position: absolute;
left: 0;
top: 40px;
display: none;
}
设置li元素的ul元素的样式，也就是二级导航菜单的样式。
ul li ul li {
float: none;
background-color: #0593d3;
margin-top: 2px;
}
float: none方式继承之前的float:left的设置。