[分享]css做二级菜单

CSS作为前端技术中的重要一环，其中二级菜单的制作也是其一个常见应用。接下来我们就来介绍如何在CSS中实现二级菜单。首先，我们需要在HTML中先写好需要用到的代码，如下： 菜单1 子菜单1 子菜单...

CSS作为前端技术中的重要一环，其中二级菜单的制作也是其一个常见应用。接下来我们就来介绍如何在CSS中实现二级菜单。

首先，我们需要在HTML中先写好需要用到的代码，如下：

 <ul class="menu">
        <li>菜单1
            <ul class="sub-menu">
                <li>子菜单1</li>
                <li>子菜单2</li>
                <li>子菜单3</li>
            </ul>
        </li>
        <li>菜单2</li>
        <li>菜单3</li>
    </ul> 

这里我们使用了<ul>和<li>标签来构建菜单，其中包含了一个主菜单菜单1和一个二级菜单。需要注意的是，二级菜单的ul标签需要放置在其主菜单的li标签内。以下是制作二级菜单的样式代码：

 .menu li {
        position: relative;
    }

    .sub-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
    }

    .menu li:hover .sub-menu {
        display: block;
    } 

我们首先为主菜单的li标签添加了一个相对定位的样式，为了定位其子元素二级菜单。接下来，我们为二级菜单的ul标签添加了一个绝对定位的样式，以便可以在主菜单下方显示。最后，我们使用:hover伪类来使二级菜单在鼠标悬浮在主菜单上时显示。

在这里，我们使用了CSS的三个核心属性 position、display 和:hover 来实现一个简单的二级菜单。可以进一步加入其他样式来美化二级菜单以达到更好的用户体验。