HTML+ CSS来实现一个简单的二级菜单栏

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


<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>
 <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>

效果图如下:
在这里插入图片描述
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>
    </ul>
</li>

在这里插入图片描述
3.最后,就是将二级菜单栏隐藏起来,只有鼠标放到对应的一级菜单上时,二级菜单才会显示。

css代码如下:

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

最终的效果如下:
HTML+ CSS来实现一个简单的二级菜单栏_第1张图片

你可能感兴趣的:(css面试题,html,css,javascript)