纯CSS 制作顶部二级导航栏效果（2020年11月16日）

背景

大二上学期网页设计基础课堂练习内容

效果截图

全部源代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .nav {
            text-decoration: none;
            list-style-type: none;
            display: block;
            width: 600px;
            height: 50px;
            margin: 0 auto;
            margin-top: 20px;
            padding-top: 20px;
            padding-left: 40px;
            background-color: black;
        }

        .nav p,
        .nav span,
        .nav ul li {
            font-size: 20px;
        }

        .nav p,
        .nav span {
            color: white;
        }

        .nav p {
            margin-right: 30px;
            margin-left: 30px;
            display: inline-block;
        }

        .nav>li {
            float: left;
            text-align: center;
        }

        .nav ul {
            /* 隐藏 */
            display: none;
            list-style-type: none;
        }

        .nav>li:hover ul {
            /* 显示 */
            display: block;
            margin-top: 14px;
            border-top: solid 10px orange;
            border-left: solid 1px black;
            border-right: solid 1px black;
            line-height: 38px;
        }

        .nav ul li:first-child {
            margin-top: 5px;
        }

        .nav ul li {
            border-bottom: solid 1px black;
        }

        .nav ul li:hover {
            color: red;
        }
    </style>
</head>

<body>
    <!-- ul>(li>p{第$一级}+span{|}+ul>li{第$二级}*4)*4 -->
    <ul class="nav">
        <li>
            <p>第1一级</p><span>|</span>
            <ul>
                <li>第1二级</li>
                <li>第2二级</li>
                <li>第3二级</li>
                <li>第4二级</li>
            </ul>
        </li>
        <li>
            <p>第2一级</p><span>|</span>
            <ul>
                <li>第1二级</li>
                <li>第2二级</li>
                <li>第3二级</li>
                <li>第4二级</li>
            </ul>
        </li>
        <li>
            <p>第3一级</p><span>|</span>
            <ul>
                <li>第1二级</li>
                <li>第2二级</li>
                <li>第3二级</li>
                <li>第4二级</li>
            </ul>
        </li>
        <li>
            <p>第4一级</p>
            <ul>
                <li>第1二级</li>
                <li>第2二级</li>
                <li>第3二级</li>
                <li>第4二级</li>
            </ul>
        </li>
    </ul>
</body>

</html>

制作过程

先把html框架做出来

在body标签里输入公式 ul>(li>p{第$一级}+span{|}+ul>li{第$二级}*4)*4

然后删除最后一个 <span>|</span> 因为只需要中间插入竖线

最后别忘给整个ul起个类名我这里叫nav了，因为nav是导航的意思
横向排布

整个列表是竖向排布的，需要改成横向排布，所以需要让最外面ul里的子代的li向左浮动，但是不需要让ul里面的 ul里面的li 也向左浮动了，所以选择器采用的是子代选择器 >
```
.nav>li {
    float: left;
    text-align: center;
}
```
制作鼠标悬停展开二级菜单效果

逻辑：
- 最初状态，.nav>li里面的.nav li ul 是隐藏的
```
.nav ul {
  /* 隐藏 */
  display: none;
  list-style-type: none;
}
```
- 鼠标放到.nav>li 上，.nav li ul 显示
```
.nav>li:hover ul {
    /* 显示 */
    display: block;
}
```
- 鼠标放到 .nav ul li 每一个二级项上，字体变红
```
.nav ul li:hover {
    color: red;
}
```
美化结构

此部分就是把边距调整调整，边框修饰一下，详见上面的全部源代码，个人觉得此部分是任务量最大的一部分。

收获与反思

收获

无序列表嵌套，并让最外层列表项向左浮动就可以做顶部二级导航的效果了。以前还没想到可以这样。
通过此次课堂练习，我知道了原来css也可以实现鼠标悬停或移出某一个元素，修改另一个部分元素的显示和隐藏的状态。之前我一直以为只能通过js来做。.nav>li:hover ul {} 这就很精辟，（以前一直以为写上带冒号的伪类之后，后面就不能再写东西了。）
css设置元素的隐藏效果可以用 display: none; 以前一直以为是opacity: 0