[分享]css两级弹出菜单代码

CSS是一种用于网页设计和开发的样式表语言。其中，两级弹出菜单是一种常见的网页交互方式，可以让网页菜单看起来更加美观、简洁。下面，我们来介绍一下实现CSS两级弹出菜单的代码。/CSS样式表/ .nav...

CSS是一种用于网页设计和开发的样式表语言。其中，两级弹出菜单是一种常见的网页交互方式，可以让网页菜单看起来更加美观、简洁。下面，我们来介绍一下实现CSS两级弹出菜单的代码。

/*CSS样式表*/
.nav {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
}

.nav > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav > ul > li {
  display: inline-block;
  position: relative;
}

.nav > ul > li > a {
  color: #333;
  display: block;
  padding: 10px;
}

.nav > ul > li:hover ul {
  display: block;
}

.nav > ul > li > ul {
  display: none;
  position: absolute;
  top: 40px;
  left: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
}

.nav > ul > li > ul > li {
  display: block;
}

.nav > ul > li > ul > li > a {
  color: #333;
  display: block;
  padding: 10px;
} 

上述代码中，我们定义了一个名为“nav”的类，用于包含导航菜单的父元素。然后，使用flex布局和space-between属性来实现菜单项之间的间隔。接着，我们定义了菜单列表的样式，包括去除列表符号、取消默认的边距和内边距。

对于每个菜单项，我们使用inline-block属性来让其横向展示，并对其子元素添加相对定位，实现子菜单的定位。在鼠标悬停在菜单项上时，我们使用:hover伪类来控制子菜单的出现，将其display属性设置为block。

最后，我们针对子菜单设置其位置、背景颜色、边框和内边距，使其看起来更加美观。需要注意的是，我们在子菜单中也设置了每个菜单项的样式，使得它们看起来更加整齐。