css实现二级菜单显示隐藏

CSS是一种用于控制网页样式和布局的编程语言。它可以让开发者轻松地实现各种视觉效果，其中一种常见的效果就是二级菜单的显示和隐藏。以下是一个简单的CSS代码示例。

/* 定义一级菜单样式 */
.nav li {
    display: inline-block;
    position: relative;
}

/* 定义二级菜单样式 */
.nav li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
}

/* 鼠标移入一级菜单时显示二级菜单 */
.nav li:hover ul {
    display: block;
}

上述代码中，我们首先使用了一个无序列表（ul）来作为菜单容器，其中每个菜单项使用一个列表项（li）来表示。对于一级菜单项，我们将它们的显示模式设置为inline-block，以便它们可以按照水平方向排列。另外，我们将每个一级菜单项的位置属性设置为relative，以便二级菜单可以相对于它们进行位置调整。

对于二级菜单，我们将它们的显示模式设置为none，以便它们默认是隐藏的。我们还将它们的位置属性设置为absolute，并设置top属性为100%和left属性为0，以便它们可以相对于对应的一级菜单项进行位置调整。

最后，我们使用:hover伪类选择器来监听鼠标移入一级菜单项的事件，一旦监听到该事件，我们就将它对应的二级菜单显示出来，具体方式就是将二级菜单的显示模式设置为block。

通过以上CSS代码示例，我们成功地实现了二级菜单的显示和隐藏效果，这样用户可以更加方便地浏览网站的内容。