<!DOCTYPE html>

<html>

html三级导航HTMLCSS做二级导航 Bootstrap
(图片来自网络侵删)

<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;

}