一级导航

（新学者如有不懂可以去参看我博客里其他的相关随笔）

* { 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="http://www.baidu.com">百度</a></li><li><a href="http://www.yandex.com">yandex</a></li><li><a href="http://www.hao123.com">hao123</a></li><li><a href="http://www.w3cschool.cn/">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爱好者评论！