一级导航，二级导航，三级导航介绍
一级导航
（新学者如有不懂可以去参看我博客里其他的相关随笔）
* { 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爱好者评论！
