一级导航，二级导航，三级导航介绍-CSDN博客

一级导航

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

* { 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爱好者评论！