通过HTML和CSS制作二级菜单栏

我们在很多网站浏览时，通常会遇到很多二级菜单栏，通常它们是隐藏起来的，只有我们鼠标移过去后，它们才会显现出来，比如说下面这张图片。但是我们如何实现类似的效果呢？下面我们仅使用 HTML+ CSS来实现一个简单的二级菜单栏。1.首先，我们先创建一级菜单。<!DOCTYPE html><html lang="en"><head><meta charset="U

方晓萧

4950人浏览 · 2021-08-17 22:13:40

方晓萧 · 2021-08-17 22:13:40 发布

我们在很多网站浏览时，通常会遇到很多二级菜单栏，通常它们是隐藏起来的，只有我们鼠标移过去后，它们才会显现出来，比如说下面这张图片。

但是我们如何实现类似的效果呢？下面我们仅使用 HTML+ CSS来实现一个简单的二级菜单栏。

1.首先，我们先创建一级菜单。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul { /*去除内外边距*/
            margin: 0px;
            padding: 0px;
        }
        li { /*去除开头的黑点*/
            list-style: none;
            background-color: cornflowerblue;
        }
        a {
            text-decoration: none; /*去除文字下划线*/
            line-height: 36px;
        }
        .firstMenu {
            width: 100%;
            height: 36px;
            background-color: cornflowerblue;
        }
        .firstMenu .menu-one .menu {
            float: left; /*设置浮动*/
            text-align: center;
            width: 100px;
            border-right: 2px solid white; /*设置右边框，用来划分元素*/
        }

    </style>
</head>
<body>
    <div class="firstMenu">
        <ul class="menu-one">
            <li class="menu">
                <a href="">学校简介</a>
            </li>
            <li class="menu">
                <a href="">人才培养</a>
            </li>
            <li class="menu">
                <a href="">科学研究</a>
            </li>
            <li class="menu">
                <a href="">招生就业</a>
            </li>
        </ul>
    </div>
</body>
</html>

效果图如下：

2.接下来，写二级菜单栏，把它添加到一级菜单中的 li 里面。部分代码如下（只写了一个，其他与第一个格式相同）：

<li class="menu">
    <a href="">学校简介</a>
    <ul class="menu-two">
        <li><a href="">学校简介</a></li>
        <li><a href="">历史沿革</a></li>
        <li><a href="">现任领导</a></li>
        <li><a href="">校园风光</a></li>
    </ul>
</li>

效果图如下：

3.最后，就是将二级菜单栏隐藏起来，只有鼠标放到对应的一级菜单上时，二级菜单才会显示。

CSS代码如下：

.firstMenu .menu-one .menu .menu-two { /*正常情况下二级菜单不显示*/
    display: none;
}
.firstMenu .menu-one .menu:hover .menu-two { 
    /*当鼠标悬浮在对应的一级菜单时，显示内容*/
    display: block;
}

最终的效果图就是下面这样：

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul { /*去除内外边距*/
            margin: 0px;
            padding: 0px;
        }
        li { /*去除开头的黑点*/
            list-style: none;
            background-color: cornflowerblue;
        }
        a {
            text-decoration: none; /*去除文字下划线*/
            line-height: 36px;
        }
        .firstMenu {
            width: 100%;
            height: 36px;
            background-color: cornflowerblue;
        }
        .firstMenu .menu-one .menu {
            float: left;
            text-align: center;
            width: 100px;
            border-right: 2px solid white; /*设置右边框，用来划分元素*/
        }
        .firstMenu .menu-one .menu .menu-two { /*正常情况下二级菜单不显示*/
            display: none;
        }
        /*当鼠标悬浮在对应的一级菜单时，显示内容*/
        .firstMenu .menu-one .menu:hover .menu-two {
            display: block;
        }
    </style>
</head>
<body>
    <div class="firstMenu">
        <ul class="menu-one">
            <li class="menu">
                <a href="">学校简介</a>
                <ul class="menu-two">
                    <li><a href="">学校简介</a></li>
                    <li><a href="">历史沿革</a></li>
                    <li><a href="">现任领导</a></li>
                    <li><a href="">校园风光</a></li>
                </ul>
            </li>
            <li class="menu">
                <a href="">人才培养</a>
                <ul class="menu-two">
                    <li><a href="">本科生教育</a></li>
                    <li><a href="">研究所教育</a></li>
                    <li><a href="">留学生教育</a></li>
                </ul>
            </li>
            <li class="menu">
                <a href="">科学研究</a>
                <ul class="menu-two">
                    <li><a href="">科研成果</a></li>
                    <li><a href="">社科成果</a></li>
                    <li><a href="">重点实验室</a></li>
                </ul>
            </li>
            <li class="menu">
                <a href="">招生就业</a>
                <ul class="menu-two">
                    <li><a href="">本科生招生</a></li>
                    <li><a href="">研究生招生</a></li>
                    <li><a href="">留学生招生</a></li>
                    <li><a href="">就业服务</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>