HTML5二级菜单显示和隐藏 html中的二级菜单

转载

bigrobin 2024-01-04 08:19:34

文章标签 HTML5二级菜单显示和隐藏 html css 二级菜单绝对定位 文章分类 HTML5 移动开发

二级菜单
主要用到的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;
}

截图

HTML5二级菜单显示和隐藏 html中的二级菜单_css