浅谈HTML中的二级菜单

最新推荐文章于 2024-08-25 19:34:22 发布

qq_45411328

最新推荐文章于 2024-08-25 19:34:22 发布

阅读量1.6k

点赞数

分类专栏：二级菜单 html 定位文章标签： html css

本文链接：https://blog.csdn.net/qq_45411328/article/details/107319409

版权

html 同时被 3 个专栏收录

5 篇文章 1 订阅

订阅专栏

定位

2 篇文章 0 订阅

订阅专栏

二级菜单

1 篇文章 0 订阅

订阅专栏

二级菜单
主要用到的HTML中的属性和技术：
1.display属性
2.定位（相对定位和绝对定位）：两个都能实现不过效果有所差异
相对定位：二级菜单会随着你鼠标的放的位置发生变化相对的是鼠标放在的选项上面（个人觉得相对定位更加人性化）
绝对定位：无论鼠标放在那个框上面二级菜单总是出现在一个地方（由于绝对定位不脱离文档流所以二级菜单还是占据位置有可能会对网页造成影响）
3.hover
4.元素之间的关系（兄弟父子之类的）
代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/01.css">
</head>

<body>
    <ul>
        <li class="g1">

            <span>
            交通环境
        </span>
            <div class="box1">
                <ul class="label2">
                    <li id="two">交通环境</li>
                    <a href="">
                        <li>劳动与雇佣关系(632)</li>
                    </a>
                    <a href="">
                        <li>失业、就业及社会保障（632）</li>
                    </a>
                    <a href="">
                        <li>社会信息相关数据（632）</li>
                    </a>
                    <a href="">
                        <li>社会信息相关数据（632）</li>
                    </a>
                    <a href="">
                        <li>劳动与雇佣关系（632）</li>
                    </a>
                    <a href="">
                        <li>失业、就业及社会保障（632）</li>
                    </a>
                    <a href="">
                        <li>社会信息相关数据（632）</li>
                    </a>
                    <a href="">
                        <li>失业、就业及社会保障（632）</li>
                    </a>
                    <a href="">
                        <li>劳动与雇佣关系(632)</li>
                    </a>
                    <a href="">
                        <li>社会信息相关数据（632）</li>
                    </a>
                    <a href="">
                        <li>劳动与雇佣关系(632)</li>
                    </a>
                    <a href="">
                        <li>失业、就业及社会保障（632）</li>
                    </a>

                </ul>
            </div>
        </li>
    </ul>
</body>

</html>

css

@charset"utf-8";
/* @import"./reset.css"; */
li.g1 {
    width: 230px;
    height: 50px;
    color: #003f98;
    line-height: 50px;
    background-color: lightblue;
    position: relative;
}

.box1 {
    width: 280px;
    height: 550px;
    position: absolute;
    top: 0;
    left: 230px;
    background-color: white;
    display: none;
    z-index: 1;
}

.box1 li {
    background-color: lightcoral;
    border: 1px solid black;
}

.g1:hover .box1 {
    display: block;
}

截图
在这里插入图片描述

当鼠标在第一个交通环境哪里就会跳出后面的二级菜单
思路

先将二级菜单写出（二级菜单得被父元素包裹）例如上面的代码中box1为g1的子元素，如果不包裹会出现以下两种情况：
1.二级菜单为选项框的父元素那么选项框的hover状态会选不中二级菜单，二级菜单的效果完全无法实现
2.二级菜单与选项框互为兄弟元素那么虽然选项框的hover状态能够选中二级菜单使用（~）兄弟选择器就可以实现。但是鼠标一旦出了选项框二级菜单就会消失即使鼠标放在二级菜单的位置。这样的话二级菜单也是只能看不能点毫无意义。
注意：最好将二级菜单的z-index设置为1要不然会和正常的页面占同一个
z轴会互相影响
然后使用相对定位把二级菜单调整到合适的位置（绝对定位也ok）
将二级菜单的display值设置为none
最后将选项框的hover状态选中二级菜单
例如g1:hover .box1{display:block;}
将二级菜单的display设置回block即可完成二级菜单的实现。