标签：
先把上面的导航栏排好，做子菜单时一定要让nav ul li 左浮动，而不是a浮动，不然子菜单的位置不对 /*一定要把a转换为盒子模型，不然红色的底板会紧挨着文字 display:block;*/ 子菜单的ul用定位position:absoult;可以控制不要让子菜单把nav的整个撑起来移动下面的整理内容
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="关键字">
<meta name="description" content="内容">
<title>无标题文档</title>
<style>
* {
margin: 0;
padding: 0;
border: 0;
}
ul, ul li {
list-style: none;
}
nav {
display: block;
width: 960px;
margin: 2px auto;
overflow: hidden;
}
nav ul li {
margin: 1px;
float: left;
}
nav ul li a {
text-align: center;
width: 130px;
height: 30px;
line-height: 30px;
background-color: #C9C9A7;
display: block;
text-decoration: none;
font-size: 13px;
color: #000000;
border-radius: 2px;
}
nav ul li a:hover {
color: #fff;
background-color: #b3ab79;
}
nav ul li ul {
display: none;
}
nav ul li:hover ul {
display: block;
position: absolute;
width: 100px;
}
nav ul li ul li a {
background-color: #faeec7;
}
nav ul li ul li a:hover {
background-color: #dfc184;
}
nav ul li ul {
width: 50px;
position: absolute;
}
.cc {
background-color: #DFDFDF;
width: 960px;
height: 1000px;
margin: 0 auto;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="">首页</a></li>
<li><a href="">公司简介</a>
<ul>
<li><a href="">aaaaaa</a></li>
<li><a href="">aaaaaa</a></li>
<li><a href="">aaaaaa</a></li>
</ul>
</li>
<li><a href="">产品中心</a></li>
<li><a href="">新闻动态</a>
<ul>
<li><a href="">aaaaaa</a></li>
<li><a href="">aaaaaa</a></li>
<li><a href="">aaaaaa</a></li>
</ul></li>
<li><a href="">客户留言</a></li>
<li><a href="">人才招聘</a>
<ul>
<li><a href="">aaaaaa</a></li>
<li><a href="">aaaaaa</a></li>
<li><a href="">aaaaaa</a></li>
</ul></li>
<li><a href="">联系我们</a></li>
</ul>
</nav>
<div class="cc"></div>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/lsr111/p/4414146.html
