css带图标横向二级导航菜单

CSS带图标横向二级导航菜单可以通过CSS的伪类和字体图标来实现。伪类可以帮助我们在菜单项上添加箭头，并使用字体或图片作为图标。

// CSS代码
.nav-menu {
  display: inline-block; // 列表项横向显示
  margin: 0;
  padding: 0;
  list-style: none; // 列表项没有bullets（圆点）
}

.nav-menu > li {
  position: relative;
  display: inline-block;
  margin: 0 10px; // 导航菜单项之间的间距
  padding: 0;
  line-height: 40px; // 导航菜单项高度
}

.nav-menu > li > a {
  display: block;
  text-decoration: none;
  color: #333;
  font-size: 16px;
  font-weight: 500;
  padding: 0 20px;
}

.nav-menu > li:hover > a {
  color: #fff; // 鼠标悬停时的颜色
  background-color: #292929; // 鼠标悬浮时的背景颜色
}

.nav-menu > li:hover > ul.sub-menu {
  display: block; // 鼠标悬浮时显示二级菜单
}

.nav-menu ul.sub-menu {
  display: none; // 二级菜单一开始会隐藏
  position: absolute;
  top: 40px; // 菜单项的底部
  left: 0;
  z-index: 999;
  padding: 10px;
  background-color: #fff; // 二级菜单的背景颜色
  Box-shadow: 0 2px 5px rgba(0,0.2); // 阴影效果
}

.nav-menu ul.sub-menu li {
  display: block;
  width: 150px; // 二级菜单的宽度
  margin: 0;
  padding: 0;
}

.nav-menu ul.sub-menu li > a {
  display: block;
  text-decoration: none;
  color: #333;
  font-size: 14px;
  font-weight: normal;
  padding: 10px 0;
  line-height: 24px;
}

.nav-menu ul.sub-menu li > a::before {
  content: '\f105'; // 字体图标，代表向右箭头
  margin-right: 8px;
  font-family: 'FontAwesome';
  font-size: 10px; // 字体图标大小
  color: #999; // 字体图标颜色
  font-weight: normal;
  vertical-align: middle;
  display: inline-block;
}

.nav-menu ul.sub-menu li > a:hover {
  color: #fff; // 鼠标悬停时的颜色
  background-color: #292929; // 鼠标悬浮时的背景颜色
}

.nav-menu ul.sub-menu li > a:hover::before {
  color: #fff; // 鼠标悬浮时箭头颜色
}

以上是CSS代码，我们可以使用伪类和字体图标来创建菜单项上的箭头。这里我们采用FontAwesome字体图标，可以通过在CSS文件中引入FontAwesome库来使用。

使用横向导航菜单可以让用户更方便地找到他们要访问的页面，同时带图标的横向二级导航菜单也可以为网站增加一些美观的效果。