$$demo <nav class="navigator"> <img class="logo" src="https://3yya.com/logo-mini.png" alt="logo" /> <h3 class="name">三眼鸭的编程教室</h3> <span class="route"> <a href="https://3yya.com/" target="_blank">首页</a> </span> <span class="route"> <a href="https://3yya.com/" target="_blank">教程</a> <div class="container"> <ul> <li> <a href="https://3yya.com/course/2" target="_blank" >Python</a > </li> <li> <a href="https://3yya.com/course/3" target="_blank" >设计模式</a > </li> <li> <a href="https://3yya.com/course/9" target="_blank">爬虫</a> </li> </ul> </div> </span> <span class="route"> <a href="https://3yya.com/courseware" target="_blank">课件</a> <div class="container"> <ul> <li> <a href="https://3yya.com/courseware/chapter/30" target="_blank" >前端课</a > </li> <li> <a href="https://3yya.com/courseware/chapter/32" target="_blank" >HTML</a > </li> <li> <a href="https://3yya.com/courseware/chapter/43" target="_blank" >CSS</a > </li> </ul> </div> </span> </nav> <style> :root { box-sizing: border-box; /* 设置根元素的 box-sizing: border-box */ } *, *:before, :after { box-sizing: border-box; / box-sizing 继承自父元素 */ }

body {
    /* 默认的 body 元素有外边距 */
    /* 将它设置为 0 */
    margin: 0;

    height: 200px;
}

.navigator {
    /* 元素水平居中 */
    text-align: center;
    height: 60px;
    box-shadow: 0 0 4px #999;
    background-color: white;

    /* 设置元素的行高与元素高度一致 */
    /* 此时内部行内子元素可以通过 vertical-align: middle 垂直居中 */
    line-height: 60px;
}

.navigator > * {
    /* 所有子代居中对齐 */
    vertical-align: middle;
}

.navigator .logo {
    height: 40px;
}

.navigator .name {
    display: inline;
    margin-right: 60px;
}
.navigator a {
    /* 让颜色继承自父辈 */
    color: inherit;

    /* 让装饰线继承自父辈 */
    text-decoration: inherit;
}
.navigator .route {
    position: relative;
    text-align: initial;
    line-height: initial;
}

.navigator .route > a {
    padding: 10px 25px;
    border-radius: 4px;
}

.navigator .route:hover > a {
    background-color: #eee;
}

/* 鼠标在 .route 元素上的时候 */
/* 设置里面 .container 元素的 display: block; */
.navigator .route:hover .container {
    display: block;
}

.navigator .route .container {
    padding-top: 25px;
    position: absolute;
    display: none;

    left: 0;
    top: 100%;
}

.navigator ul {
    width: 140px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 14px;
    border-radius: 4px;
    box-shadow: 0 0 4px #999;
    background-color: white;
}

.navigator ul a {
    display: block;
    padding: 10px;
}
.navigator ul a:hover {
    background-color: #eee;
}

</style>

$$

$$answer

<nav class="navigator">
    <img class="logo" src="https://3yya.com/logo-mini.png" alt="logo" />
    <h3 class="name">三眼鸭的编程教室</h3>
    <span class="route">
        <a href="https://3yya.com/" target="_blank">首页</a>
    </span>
    <span class="route">
        <a href="https://3yya.com/" target="_blank">教程</a>
        <div class="container">
            <ul>
                <li>
                    <a href="https://3yya.com/course/2" target="_blank"
                        >Python</a
                    >
                </li>
                <li>
                    <a href="https://3yya.com/course/3" target="_blank"
                        >设计模式</a
                    >
                </li>
                <li>
                    <a href="https://3yya.com/course/9" target="_blank">爬虫</a>
                </li>
            </ul>
        </div>
    </span>
    <span class="route">
        <a href="https://3yya.com/courseware" target="_blank">课件</a>
        <div class="container">
            <ul>
                <li>
                    <a
                        href="https://3yya.com/courseware/chapter/30"
                        target="_blank"
                        >前端课</a
                    >
                </li>
                <li>
                    <a
                        href="https://3yya.com/courseware/chapter/32"
                        target="_blank"
                        >HTML</a
                    >
                </li>
                <li>
                    <a
                        href="https://3yya.com/courseware/chapter/43"
                        target="_blank"
                        >CSS</a
                    >
                </li>
            </ul>
        </div>
    </span>
</nav>
<style>
    :root {
        box-sizing: border-box; /* 设置根元素的 box-sizing: border-box */
    }
    *,
    *:before,
    *:after {
        box-sizing: border-box; /* box-sizing 继承自父元素 */
    }

    body {
        /* 默认的 body 元素有外边距 */
        /* 将它设置为 0 */
        margin: 0;
    }

    .navigator {
        /* 元素水平居中 */
        text-align: center;
        height: 60px;
        box-shadow: 0 0 4px #999;
        background-color: white;

        /* 设置元素的行高与元素高度一致 */
        /* 此时内部行内子元素可以通过 vertical-align: middle 垂直居中 */
        line-height: 60px;
    }

    .navigator > * {
        /* 所有子代居中对齐 */
        vertical-align: middle;
    }

    .navigator .logo {
        height: 40px;
    }

    .navigator .name {
        display: inline;
        margin-right: 60px;
    }
    .navigator a {
        /* 让颜色继承自父辈 */
        color: inherit;

        /* 让装饰线继承自父辈 */
        text-decoration: inherit;
    }
    .navigator .route {
        position: relative;
        text-align: initial;
        line-height: initial;
    }

    .navigator .route > a {
        padding: 10px 25px;
        border-radius: 4px;
    }

    .navigator .route:hover > a {
        background-color: #eee;
    }

    /* 鼠标在 .route 元素上的时候 */
    /* 设置里面 .container 元素的 display: block; */
    .navigator .route:hover .container {
        display: block;
    }

    .navigator .route .container {
        padding-top: 25px;
        position: absolute;
        display: none;

        left: 0;
        top: 100%;
    }

    .navigator ul {
        width: 140px;
        list-style: none;
        margin: 0;
        padding: 0;
        font-size: 14px;
        border-radius: 4px;
        box-shadow: 0 0 4px #999;
        background-color: white;
    }

    .navigator ul a {
        display: block;
        padding: 10px;
    }
    .navigator ul a:hover {
        background-color: #eee;
    }
</style>

$$