css实现二级菜单列表

今天，我们来学习如何使用CSS实现二级菜单列表。CSS可以为网页添加样式，比如颜色、字体等。通过使用一些简单的CSS属性和选择器，我们可以制作出漂亮的菜单列表。 首先，我们需要创建一个基本的HTML菜单列表。在这个列表中，每个主菜单项都将拥有一个下拉列表。我们可以通过在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>

现在，我们可以开始添加CSS样式。我们需要定义一些基本的样式。比如，我们需要隐藏所有的下拉列表，并为主菜单项添加悬停时的样式。

    .menu {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .menu li {
        float: left;
        position: relative;
    }
    .menu li:hover {
        background: #eee;
    }
    .submenu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1;
    }

在这个样式中，我们将所有子菜单列表设置为不可见，然后为主菜单项添加一个悬停样式，当主菜单项被悬停时，背景颜色将会变成浅灰色。同时，我们还将子菜单设置为绝对定位，使其能够在主菜单项下方显示。 最后，我们需要为主菜单项添加一个鼠标悬停后的动作。我们将通过使用CSS伪类选择器:hover来实现这个效果，当使用者将鼠标悬停在主菜单项上时，我们将会显示它下面的子菜单。

    .menu li:hover .submenu {
      display: block;
    }
    .submenu li {
      float: none;
      clear: both;
      width: 100%;
    }

在上述示例中，我们使用:hover伪类来定义主菜单项被悬停时显示子菜单的效果。同时，我们还针对子菜单项添加了一些样式，使其占满主菜单项下方的整个宽度。 总结一下，我们可以使用CSS很容易地制作一个简单的二级菜单列表。我们只需要使用无序列表和嵌套列表来创建菜单项，然后使用一些基本的CSS属性和选择器来添加样式。通过这些技术，我们可以创建出漂亮的菜单列表来。