HTMl+CSS制作二级菜单或二级导航栏

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

苔米自渡

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

阅读量2.6w

点赞数 38

分类专栏：前端 HTML CSS 文章标签： css html 前端

本文链接：https://blog.csdn.net/m0_49406079/article/details/122330922

版权

前端同时被 3 个专栏收录

1 篇文章 1 订阅

订阅专栏

HTML

1 篇文章 0 订阅

订阅专栏

CSS

1 篇文章 0 订阅

订阅专栏

二级菜单的实现思路为： 1.在默认状态下，使用display:none;将二级菜单隐藏。 2.当一级菜单中的列表标签li获取焦点(hover)后，使用display:blick;将二级菜单显示出来。 3.使用position: relative;和position: absolute;分别得一级菜单和二级菜单设置相对定位和绝对定位。

　　本内容面向小白向，我在代码中加了详细的注释，解释了语句的作用。

　　二级菜单展开后效果如下(没有美化，见谅)：

　　　HTMl代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>二级菜单</title>
        <link rel="stylesheet" type="text/css" href="css/index.css"/>
    </head>
    <body>
        <div class="menu">
            <ul>
                <li>首页</li>
                <li>博客
                    <ul>
                        <li>博客1</li>
                        <li>博客2</li>
                        <li>博客3</li>
                    </ul>
                </li>
                <!-- 注意：需要将二级菜单的ul放在一级菜单的li标签内 -->
                <li>新闻</li>
                <li>账户</li>
            </ul>
        </div>
    </body>
</html>

CSS代码如下：

ul li{
    list-style: none;
    /* 清除列表原有样式 */
}
.menu{
    width: 600px;
    height: 60px;
    background-color: aquamarine;
}
.menu ul li{
    float: left;
    /* 使列表(一级菜单)横向 */
    margin-right: 50px;
    margin-top: 20px;
    /* 设置一级菜单内容的位置 */
    position: relative;
}
.menu ul li ul{
    width: 100px;
    height: 160px;
    margin-left: -50px;
    background-color: #7FFFD4;
    display: none;
    /* 设置初始为不显示 */
    position: absolute;
}
.menu ul li:hover ul{
    display: block;
    /* 当一级菜单的li获取hover后将二级菜单的ul显示出来 */
}

原创内容，转载请注明出处！！！

苔米自渡

关注

38
点赞
踩
238

收藏

觉得还不错? 一键收藏
1
评论
HTMl+CSS制作二级菜单或二级导航栏

二级菜单的实现思路为： 1.在默认状态下，使用display:none;将二级菜单隐藏。 2.当一级菜单中的列表标签li获取焦点(hover)后，使用display:blick;将二级菜单显示出来。 3.使用position: relative;和position: absolute;分别得一级菜单和二级菜单设置相对定位和绝对定位。　　本内容面向小白向，我在代码中加了详细的注释，解释了语句的作用。　　二级菜单展开后效果如下(没有美化，见谅)：　　　HTMl代码如下：...
复制链接

扫一扫

专栏目录