css实现二级菜单

由上面的实例可以看出，使用css的display属性控制二级下拉菜单的显示与否。当鼠标移动到一级菜单的li标签时，显示二级菜单的ul标签。display:block - 把链接显示为块元素可使整个链接区域可点击（不仅仅是文本），同时也允许我们规定宽度。先隐藏二级的菜单，当鼠标移动到一级菜单的li标签时，在显示二级菜单的ul标签。list-style-type:none - 删除圆点。float：l

first_hands

2593人浏览 · 2023-03-03 19:55:06

first_hands · 2023-03-03 19:55:06 发布

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /* 去除前面的点 */
        ul{
            list-style-type: none;
        }
        .box{
            width: 400px;
            margin: 0 auto;
            text-align: center;
        }
        .box1{
            width: 198px;
            float: left;
            background-color: rgb(64, 175, 212);
        }
        .box1 ul{
            display: none;
            background-color: aquamarine;
        }
        /* 鼠标放在box1上时ul显现 */
        .box1:hover ul{
            display: block;
        }
        .box .box1 li:hover{
            background: red;
        }
    </style>
</head>

<body>
    <ul class="box">
        <li class="box1">
            星期
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
            </ul>
        </li>
        <li class="box1">
            课程
            <ul>
                <li>数学</li>
                <li>英语</li>
                <li>语文</li>
                <li>政治</li>
            </ul>
        </li>
    </ul>
</body>
</html>

由上面的实例可以看出，使用css的display属性控制二级下拉菜单的显示与否。当鼠标移动到一级菜单的li标签时，显示二级菜单的ul标签。

核心代码：

list-style-type:none - 删除圆点。

float：left-向左浮动，保证一级菜单水平显示。

:hover-用于选择鼠标指针浮动在上面的元素。

display:none-隐藏二级的菜单。

display:block - 把链接显示为块元素可使整个链接区域可点击（不仅仅是文本），同时也允许我们规定宽度。

先隐藏二级的菜单，当鼠标移动到一级菜单的li标签时，在显示二级菜单的ul标签。

影藏状态