css二级下拉 弹出菜单

网站中经常会用到二级下拉弹出菜单，在前端开发中利用CSS实现二级下拉弹出菜单也非常方便。下面我们来看看如何实现。

首先，我们需要在HTML中创建一个ul列表，用于存放我们的菜单项。然后我们给每一个菜单项添加一个id和class，以便于后续的CSS样式设置。

    <ul>
        <li id="menu1" class="menu-item">一级菜单1
            <ul class="submenu">
                <li>二级菜单1-1</li>
                <li>二级菜单1-2</li>
                <li>二级菜单1-3</li>
            </ul>
        </li>
        <li id="menu2" class="menu-item">一级菜单2
            <ul class="submenu">
                <li>二级菜单2-1</li>
                <li>二级菜单2-2</li>
                <li>二级菜单2-3</li>
            </ul>
        </li>
    </ul>

接下来，我们使用CSS来控制菜单项的显示和隐藏。我们可以利用:hover伪类选择器来实现鼠标悬停在一级菜单项上时，显示对应的二级菜单。

    .menu-item {
        position: relative;
    }
    .submenu {
        position: absolute;
        top: 100%;
        left: 0;
        display: none;
    }
    .menu-item:hover .submenu {
        display: block;
    }

以上代码的作用如下：

• 我们给一级菜单项添加了一个相对定位的position: relative;
• 我们给二级菜单项添加了一个绝对定位的position: absolute;,让其脱离文档流。
• 我们在二级菜单项初始状态下，设置display: none;来隐藏二级菜单。
• 我们使用:hover伪类选择器来选择一级菜单项，当鼠标悬停在一级菜单项上时，显示对应的二级菜单。

以上CSS样式的实现，就可以让我们创建一个漂亮的二级下拉弹出菜单了。