html ul li 有子标签的菜单栏添加三角图标

你可以使用CSS的伪元素 :before 或 :after 来实现添加三角图标的效果。以下是一个例子：

HTML代码：

<ul class="menu">
  <li><a href="#">菜单项1</a>
    <ul>
      <li><a href="#">子菜单项1</a></li>
      <li><a href="#">子菜单项2</a></li>
    </ul>
  </li>
  <li><a href="#">菜单项2</a></li>
  <li><a href="#">菜单项3</a></li>
</ul>

CSS代码：

.menu li ul {
  display: none; /* 隐藏子菜单 */
}

.menu li:hover ul {
  display: block; /* 鼠标悬停时显示子菜单 */
}

.menu li ul li:before {
  content: "▶"; /* 三角图标 */
  margin-right: 5px; /* 图标与文本之间的距离 */
}

在上述代码中，使用 :before 伪元素在每个子菜单项前添加了一个三角图标，并使用 CSS 控制显示和隐藏子菜单。注意，这只是一个简单的例子，具体样式可以根据需要进行修改。

相关问题

html导航栏右边带小三角

HTML导航栏右侧通常会显示一个下拉箭头或小三角形图标，用于表示当鼠标悬停或点击该区域时会有一个下拉菜单出现，展示更多的链接选项。这种设计常见于响应式布局中，以便在屏幕空间有限时节省空间。实现这个效果，你可以使用HTML的`<nav>`元素结合CSS样式。例如：

<nav>
  <ul class="menu">
    <li><a href="#">主菜单</a></li>
    <li><a href="#">更多...</a>
      <ul class="dropdown">
        <li><a href="#">选项1</a></li>
        <li><a href="#">选项2</a></li>
      </ul>
    </li>
  </ul>
  <span class="arrow">▾</span> <!-- 或者使用其他HTML实体如&darr; -->
</nav>

<style>
.menu li:hover > .dropdown {
  display: none; /* 隐藏默认状态下的下拉菜单 */
}
.menu li:hover > a::after {
  content: "\9650"; /* CSS Unicode Entity for the down arrow (U+25BC) */
  display: inline-block; /* 显示箭头 */
}
.dropdown {
  display: none;
  position: absolute;
  list-style-type: none;
}
</style>