css弹出二级菜单

CSS弹出二级菜单是网站导航中常用的一种形式。下面我们来介绍实现这种菜单的方法。

首先，在HTML文件中创建一个菜单，我们以一个无序列表为例：

    <ul class="menu">
        <li>一级菜单1
            <ul class="submenu">
                <li>二级菜单1</li>
                <li>二级菜单2</li>
            </ul>
        </li>
        <li>一级菜单2
            <ul class="submenu">
                <li>二级菜单1</li>
                <li>二级菜单2</li>
                <li>二级菜单3</li>
            </ul>
        </li>
    </ul>

其中，一级菜单与二级菜单都包含在li标签中。二级菜单使用嵌套的无序列表实现。

接下来，在CSS中设置菜单的样式。首先设置一级菜单：

    .menu {
        list-style: none;
        display: flex;
    }

    .menu>li {
        position: relative;
        margin-right: 20px;
    }

上述代码中，我们使用了flex布局来排列菜单项。一级菜单项使用position: relative属性来实现二级菜单的绝对定位。

接下来，设置二级菜单：

    .submenu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
    }

    .menu>li:hover .submenu {
        display: block;
    }

二级菜单初始状态下使用display: none隐藏，当鼠标悬停在一级菜单项上时，使用.menu>li:hover .submenu选择器将其display属性设置为block以显示出来。

最后，设置二级菜单的样式，使其居中并添加背景色和边框等样式即可：

    .submenu>li {
        text-align: center;
        background-color: #f0f0f0;
        border: 1px solid #ccc;
        width: 100px;
        padding: 10px 0;
    }

完成以上设置后，我们就可以实现一个简单的CSS弹出二级菜单了。