一級導航
（新學者如有不懂可以去參看我博客里其他的相關隨筆）
* { margin: 0; padding: 0; }消除網頁默認的margin值和padding值
.nav { width: 1280px; height: 60px; border: 1px solid red; margin: 70px auto; }
給div設置寬高和邊界線
`ul li { list-style: none; }`去除無序列表前面的點
ul li a{
float: left; 向左浮動
width: 320px; 塊320像素
height: 60px; 高60像素
text-align: center; 文字居中
line-height: 60px; 字高60像素
font-weight: bold; 字體加粗
display: block; 顯示為塊類型
text-decoration: none; 去除下划線
background-color: green; 背景顏色為綠色
color: black; 字體顏色為黑色
}這里定義a標簽的屬性
ul li a:hover { background-color: black; color: white; }當鼠標懸浮於a標簽上時背景和字體發生的變化
ul li a:active { background-color: red; color: orange; }當鼠標點擊a標簽上時背景和字體發生的變化 ##以下是一級導航完整代碼 ----
在li上進行hover 操作時產生的ul ）的css屬性值 ！
這是二級導航的重要css代碼
.nv ul li ul {
position: absolute; 絕對定位
display: none; 隱藏塊類型
}
.nv ul li ul li {
float: none; 消除浮動
}
.nv ul li ul li a {
background:pink;
color: black;
}
.nv ul li:hover ul {
display:block; 顯示塊
}
以下是二級導航的全部代碼（含部分解釋）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二級導航</title>
<style>
* {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
.nv {
width: 1000px;
height: 60px;
margin: 20px auto;
border: 1px solid #ccc;
overflow: hidden; 溢出隱藏
}
.nv ul li {
float: left;
width: 250px;
height: 60px;
}
.nv ul li a {
font-weight: bold;
text-decoration: none;
text-align: center;
line-height: 60px;
display: block;
background-color: purple;
color: red;
}
.nv ul li a:hover {
background-color: orange;
color: #ccc; #ccc表示灰色
}
.nv ul li a:active {
background-color: red;
color: green;
}
.nv ul li ul {
position: absolute; 絕對定位
display: none; 隱藏塊類型
}
.nv ul li ul li {
float: none; 消除浮動
}
.nv ul li ul li a {
background:pink;
color: black;
}
.nv ul li:hover ul {
display:block; 顯示塊
}
</style>
</head>
<body>
<div class="nv">
<ul>
<li><a href="##">一級1</a>
<ul>
<li><a href="#">二級1.1</a></li>
<li><a href="#">二級1.2</a></li>
<li><a href="#">二級1.3</a></li>
<li><a href="#">二級1.4</a></li>
</ul>
</li>
<li><a href="##">一級2</a>
<ul>
<li><a href="#">二級2.1</a></li>
<li><a href="#">二級2.2</a></li>
<li><a href="#">二級2.3</a></li>
<li><a href="#">二級2.4</a></li>
</ul>
</li>
<li><a href="##">一級3</a>
<ul>
<li><a href="#">二級3.1</a></li>
<li><a href="#">二級3.2</a></li>
<li><a href="#">二級3.3</a></li>
<li><a href="#">二級3.4</a></li>
</ul>
</li>
<li><a href="##">一級4</a>
<ul>
<li><a href="#">二級4.1</a></li>
<li><a href="#">二級4.2</a></li>
<li><a href="#">二級4.3</a></li>
<li><a href="#">二級4.4</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
三級導航
這是三級導航的重要代碼和二級導航有相似
.nav ul li:hover ul li ul {
display: none;
position: absolute;
left: 200px;
top: 0px;
}
.nav ul li ul li ul li {
float: none;
}
.nav ul li ul li ul li a {
background-color: green;
color: black;
/* top: 0;
left: 200px;*/
}
.nav ul li:hover ul li:hover ul {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三級導航</title>
<style>
* {
margin: 0;
padding: 0;
}
.nav {
width: 600px;
height: 60px;
margin: 40px auto;
border: 1px solid #ccc;
}
a {
text-decoration: none;
}
ul li {
list-style: none;
}
.nav ul li {
width: 200px;
height: 60px;
float: left;
position: relative;
}
.nav ul li a {
display: block;
line-height: 60px;
text-align: center;
background-color: red;
color: green;
}
.nav ul li a:hover {
background-color: orange;
color: white;
}
.nav ul li ul {
position: absolute;
display: none;
}
.nav ul li ul li {
float: none;
}
.nav ul li ul li a {
background-color: red;
color: blue;
}
.nav ul li:hover ul {
display: block;
}
.nav ul li:hover ul li ul {
display: none;
position: absolute;
left: 200px;
top: 0px;
}
.nav ul li ul li ul li {
float: none;
}
.nav ul li ul li ul li a {
background-color: green;
color: black;
/* top: 0;
left: 200px;*/
}
.nav ul li:hover ul li:hover ul {
display: block;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">導航1</a>
<ul>
<li><a href="#">導航2.1</a>
<ul>
<li><a href="#">導航</a></li>
<li><a href="#">導航3</a></li>
<li><a href="#">導航3</a></li>
</ul>
</li>
<li><a href="#">導航2.2</a>
<ul>
<li><a href="#">導航3</a></li>
<li><a href="#">導航</a></li>
<li><a href="#">導航3</a></li>
</ul>
</li>
<li><a href="#">導航2.3</a>
<ul>
<li><a href="#">導航3</a></li>
<li><a href="#">導航3</a></li>
<li><a href="#">導航</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">導航1</a>
<ul>
<li><a href="#">導航2</a>
<ul>
<li><a href="#">導航</a></li>
<li><a href="#">導航3</a></li>
<li><a href="#">導航3</a></li>
</ul>
</li>
<li><a href="#">導航2</a>
<ul>
<li><a href="#">導航3</a></li>
<li><a href="#">導航</a></li>
<li><a href="#">導航3</a></li>
</ul>
</li>
<li><a href="#">導航2</a>
<ul>
<li><a href="#">導航3</a></li>
<li><a href="#">導航3</a></li>
<li><a href="#">導航</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">導航1</a>
<ul>
<li><a href="#">導航2</a>
<ul>
<li><a href="#">導航</a></li>
<li><a href="#">導航3</a></li>
<li><a href="#">導航3</a></li>
</ul>
</li>
<li><a href="#">導航2</a>
<ul>
<li><a href="#">導航3</a></li>
<li><a href="#">導航</a></li>
<li><a href="#">導航3</a></li>
</ul>
</li>
<li><a href="#">導航2</a>
<ul>
<li><a href="#">導航3</a></li>
<li><a href="#">導航3</a></li>
<li><a href="#">導航</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
歡迎廣大IT愛好者評論！