[分享]css做横向二级菜单栏

如果你想要在你的网站上实现横向的二级菜单栏，那么CSS是你实现这个目标的最佳选择。CSS技术将帮助你创建漂亮而且易于导航的菜单栏，同时也提供了很多灵活性和自定义功能。/ 创建我们的基本菜单栏结构 / ...

如果你想要在你的网站上实现横向的二级菜单栏，那么CSS是你实现这个目标的最佳选择。CSS技术将帮助你创建漂亮而且易于导航的菜单栏，同时也提供了很多灵活性和自定义功能。

/* 创建我们的基本菜单栏结构 */
.navbar {
  display: flex;
  justify-content: space-between;
  background-color: #333;
  height: 50px;
  color: #fff;
}

.navbar ul {
  display: flex;
}

.navbar li {
  list-style-type: none;
  margin-right: 20px;
}

/* 添加悬停效果，以及下拉菜单的样式 */
.navbar li:hover {
  cursor: pointer;
}

.sub-menu {
  display: none;
  position: absolute;
  top: 50px;
  left: 0;
  background-color: #333;
  padding: 0;
  margin: 0;
}

.sub-menu li {
  list-style-type: none;
  margin: 0;
}

.navbar li:hover .sub-menu {
  display: flex;
  flex-direction: column;
}

.sub-menu a {
  color: #fff;
  padding: 10px;
}

.sub-menu a:hover {
  background-color: #555;
} 

以上代码创建了一个基本的菜单栏结构，接着我们可以创建下拉菜单。我们给每个有下拉菜单的菜单项加上一个悬停效果，这样用户一旦悬停在菜单项上，下拉菜单就会显示出来。我们使用绝对定位来让下拉菜单脱离文档流，并在菜单项下方展示。同时，我们为下拉菜单添加了一些样式，如背景色等，以使它看起来更漂亮。

通过这样简单的代码，我们就创建了一个美观的、易于导航的横向二级菜单栏。你可以轻松将这个代码段应用到你的网站上并进行自定义配置以满足你的需要。