HTML+CSS做二級導航
<!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;
}