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>