[分享]css做鼠标点击二级菜单栏

CSS是前端开发过程中不可或缺的一部分。在实际应用中，我们常常需要为网页添加菜单栏，让用户更加方便地浏览网站内容。在这篇文章中，我们将介绍如何使用CSS实现鼠标点击二级菜单栏的效果。 菜单1 菜单...

CSS是前端开发过程中不可或缺的一部分。在实际应用中，我们常常需要为网页添加菜单栏，让用户更加方便地浏览网站内容。

在这篇文章中，我们将介绍如何使用CSS实现鼠标点击二级菜单栏的效果。

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

首先，我们用HTML编写菜单栏。其中，菜单2是一个有子菜单的菜单项。

 .menu li {
        display: inline;
        margin-right: 20px;
        position: relative;
    }
    .sub-menu-list {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
    }
    .sub-menu:hover .sub-menu-list {
        display: block;
    } 

然后，我们使用CSS定义菜单项和子菜单的样式。其中，.menu li定义了菜单项的共同样式，包括display:inline、margin-right:20px和position:relative。

而.sub-menu-list定义了子菜单的样式，包括display:none、position:absolute、top:100%和left:0。这里top和left的值用来控制子菜单的位置。

最后，.sub-menu:hover .sub-menu-list定义了鼠标悬停在菜单项上时，显示相应的子菜单。

通过以上代码，我们就成功地使用CSS实现了鼠标点击二级菜单栏的效果。