导航下拉菜单左移及Specialists旁添加箭头图标问题求助

1. 给「Specialists」加上下拉箭头 #

不用外部图标，直接用CSS伪元素生成箭头，还能加悬停动画增强交互：

.dropdown > a::after {
  content: '';
  display: inline-block;
  margin-left: 6px;
  /* 用边框绘制向下箭头 */
  border-top: 5px solid #000;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  vertical-align: middle;
  transition: transform 0.2s ease;
}

/* 鼠标悬停时箭头翻转成向上状态 */
.dropdown:hover > a::after {
  transform: rotate(180deg);
}

2. 将下拉菜单及内部链接向左偏移 #

调整.dropdown-content的定位和内边距，实现菜单整体左移，同时让链接文字更靠左：

.dropdown-content {
  /* 保留原有属性，新增以下两行 */
  left: -20px; /* 向左偏移20px，抵消父元素的margin-right */
  padding-left: 0; /* 去掉默认内边距，避免菜单左侧留白 */
}

.dropdown-content a {
  /* 把左内边距从18px改为12px，让文字更靠左 */
  padding: 12px 12px;
}

修改后的完整代码 #

CSS：

nav ul {
    background-color: lightgray;
    display: flex;
    list-style: none;
    overflow: visible;
    padding-left: 0; /* 去掉默认内边距，让导航左对齐 */
  }
  
nav ul li {
    margin-right: 20px;
    position: relative;
    padding: 8px 0; /* 增加上下内边距，扩大点击区域 */
  }

nav ul li a {
    letter-spacing: 1px;
    font-size: 20px;
    background-color: lightgray;
    color: black;
    text-decoration: none;
    display: block; /* 让链接占满li高度，点击更便捷 */
  }

nav ul li a:hover{
    color: white;
  }

.dropdown {
  position: relative;
  display: inline-block;
}

/* 下拉箭头样式 */
.dropdown > a::after {
  content: '';
  display: inline-block;
  margin-left: 6px;
  border-top: 5px solid #000;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  vertical-align: middle;
  transition: transform 0.2s ease;
}

.dropdown:hover > a::after {
  transform: rotate(180deg);
}

.dropdown-content {
  display: flex;
  flex-direction: column;
  position: absolute;
  background-color: lightgray;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  transition: transform .25s ease-in;
  transform: scale(0.1, 0.1);
  transform-origin: 0 0;
  opacity: 0;
  left: -20px;
  padding-left: 0;
}

.dropdown-content a {
  color: #333;
  padding: 12px 12px;
  text-decoration: none;
  display: block;
  font-size: 14px;
}

.dropdown-content a:hover {
  background-color: grey;
}

.dropdown:hover .dropdown-content {
  opacity: 1;
  transform: scale(1, 1);
}

HTML（无需改动）：

<nav>
  <ul>
    <li><a href="index.html">Our Story</a></li>
    <li class="dropdown">
      <a href="#">Specialists</a>
      <ul class="dropdown-content">
        <li><a href="#">Option 1</a></li>
        <li><a href="#">Option 2</a></li>
        <li><a href="#">Option 3</a></li>
      </ul>
    </li>
    <li><a href="#">Training</a></li>
    <li><a href="#">DBS</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

关键说明 #

• 箭头用纯CSS实现，无需额外图标文件，旋转动画能直观提示下拉状态
• left: -20px刚好抵消父li的margin-right:20px，让下拉菜单与导航项左对齐
• 调整链接内边距让文字更靠左，同时优化了导航项的点击区域，提升用户体验

内容的提问来源于stack exchange，提问作者Haychh233