<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航菜单</title>
<link rel="stylesheet" type="text/css" href="css/nav.css"/>
</head>
<body>
<!--头部-->
<header>
<div class="container">
<!--导航条-->
<ul class="nav">
<li style="background-color: gold;">
<a href="#">首页</a>
</li>
<li>
<a href="#">公司概况</a>
<ul class="nav-list">
<li>公司简介</li>
<li>发展历程</li>
<li>组织机构</li>
<li>总经理寄语</li>
</ul>
</li>
<li>
<a href="#">公司文化</a>
<ul class="nav-list">
<li>文化理念</li>
<li>员工活动</li>
<li>党/工/团建设</li>
</ul>
</li>
<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>
</div>
</header>
</body>
</html>
nav.css
@charset "utf-8";
*{
margin: 0px;
padding: 0px;
}
header{
height: 65px;
background-color: #666666;
}
.container{
margin: 0 auto;
width: 1180px;
height: 65px;
/*background-color: #efefef;*/
}
.nav{height: 65px;
line-height: 65px;
text-align: center;
}
.nav>li{
list-style:none;
float: left;
width: 100px;
margin-right: 2px;
position: relative;
}
.nav>li>a{
text-decoration: none;
color: white;
}
.nav>li:hover{
background-color: gold;
}
.nav>li:hover>a{
color: #666666;
}
.nav li .nav-list{
width: 200px;
height: 300px;
background-color: #666666;
display: none;
}
.nav-list li{
list-style: none;
text-align: left;
padding-left: 10px;
}
.nav>li:hover .nav-list{
position: absolute;
left: 0px;
top: 66px;
display: block;
}
.nav>li:hover .nav-list li{
height: 35px;
line-height: 35px;
color: white;
font-weight: bold;
}