一级导航
（新学者如有不懂可以去参看我博客里其他的相关随笔）
* { 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标签上时背景和字体发生的变化
##以下是一级导航完整代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>一级导航网页链接导航</title><style>* {margin: 0;padding: 0;}.nav {width: 1280px;height: 60px;border: 1px solid red;margin: 70px auto;}ul li {list-style: none;}ul li a{float: left;width: 320px;height: 60px;text-align: center;line-height: 60px;font-weight: bold;display: block;text-decoration: none;background-color: green;color: black;}ul li a:hover {background-color: black;color: white;}ul li a:active {background-color: red;color: orange;}</style></head><body><div class="nav"><ul><li><a href="">百度</a></li><li><a href="">yandex</a></li><li><a href="">hao123</a></li><li><a href="/">w3c</a></li></ul></div></body></html>
二级导航
.nv ul li:hover ul表示定义（class=nv属性下ul ul下的li
在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爱好者评论！
