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

最新推荐文章于 2024-05-27 17:27:19 发布

纵有千堆雪与长街

最新推荐文章于 2024-05-27 17:27:19 发布

阅读量6.2k

点赞数 4

分类专栏： css面试题文章标签： html css javascript

原文链接：https://blog.csdn.net/method_Wcs/article/details/119765793?ops_request_misc=&request_id=&biz_id=102&utm_term=html%E4%BA%8C%E7%BA%A7%E8%8F%9C%E5%8D%95%E6%98%BE%E7%A4%BA%E4%B8%8E%E9%9A%90%E8%97%8Fcss&utm_medium=distribute.pc_search_result.none-task-blog-2~a

版权

css面试题专栏收录该内容

21 篇文章 2 订阅

订阅专栏

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

最终的效果如下：
请添加图片描述

纵有千堆雪与长街

关注

4
点赞
踩
70

收藏

觉得还不错? 一键收藏
0
评论
HTML+ CSS来实现一个简单的二级菜单栏

3.最后，就是将二级菜单栏隐藏起来，只有鼠标放到对应的一级菜单上时，二级菜单才会显示。2.接下来，写二级菜单栏，把它添加到一级菜单中的 li 里面。1.首先，我们先创建一级菜单。
复制链接

扫一扫