css一级导航栏二级导航栏

CSS一级导航栏二级导航栏，是网页设计中很常见的一种导航菜单，可以帮助用户更快速地定位需要的内容。在实现这种菜单之前，需要对CSS有一定的了解。

/* 一级导航菜单样式 */
.navbar {
  display: flex;
  list-style: none;
  background-color: #333;
  color: #fff;
  padding: 0;
}

.navbar li {
  flex: 1;
  text-align: center;
  cursor: pointer;
}

.navbar li:hover {
  background-color: #555;
}

/* 二级导航菜单样式 */
.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  padding: 0;
  background-color: #555;
  list-style: none;
}

.submenu li {
  text-align: center;
  cursor: pointer;
}

.submenu li:hover {
  background-color: #777;
}

/* 一级菜单鼠标悬浮时，显示二级菜单 */
.navbar li:hover .submenu {
  display: block;
}

以上是一级导航栏和二级导航栏的样式代码。一级导航菜单使用了flex布局，使得菜单项可以自适应宽度并等分容器，使得导航更加美观。在导航条的每一项中，鼠标悬浮时可以通过hover为其添加背景色等效果。

二级导航菜单需要使用position:absolute，使其脱离文档流并且固定在一级导航菜单下方。同时需要对其使用display：none，使其默认不显示。当鼠标在一级菜单上悬停时，利用CSS选择器“li:hover”选中该一级菜单下的二级菜单，使其显示出来。

CSS一级导航栏二级导航栏不仅美观实用，而且可以为用户提供更好的导航和操作体验。有了这个例子后，可以根据自己的需求进行更改和扩展。