下拉菜单（drop down menu）未对齐问题及hover样式实现求助

你的下拉菜单目前存在两个核心问题：定位错位和hover颜色效果未生效，我来一步步帮你修复：

问题分析与修复方案 #

1. 下拉菜单对齐问题

你的.dropdown-child没有设置绝对定位，导致它会占据文档流空间，无法和父菜单对齐；同时HTML结构里存在多余的闭合标签（</ul></div>），需要先修正结构规范。

2. Hover颜色效果失效

你定义了.mainmenubtn:hover样式，但代码里并没有给触发下拉的元素添加这个类名，导致样式无法绑定到目标元素上。我们可以直接针对目标元素编写hover逻辑。

修复后的完整代码 #

HTML（修正结构后）

<ul>
  <div class='dropdown'>
    <li><a href='#' class="mainmenubtn">More</a></li>
    <div class='dropdown-child'>
      <a href=''>Sub Menu 1</a>
      <a href=''>Sub Menu 2</a>
      <a href=''>Sub Menu 3</a>
      <a href=''>Sub Menu 4</a>
    </div>
  </div>
</ul>

CSS（添加定位与hover样式）

/* 触发下拉的主按钮hover效果 */
.mainmenubtn:hover { 
  background-color: blue; 
}

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

.dropdown-child { 
  display: none; 
  position: absolute; /* 绝对定位脱离文档流，避免影响布局 */
  left: 0; /* 对齐父元素左侧 */
  top: 100%; /* 紧贴父元素底部 */
  background-color: #16132b; 
  min-width: 150px; /* 适当加宽，避免内容挤压 */
  z-index: 1; /* 确保下拉菜单在其他元素上方 */
}

.dropdown-child a { 
  padding: 0 10px; /* 调整内边距，优化文字排版 */
  height: 60px; 
  font-family: 'Changa'; 
  display: block; 
  line-height: 60px; 
  border-bottom: 1px solid #ff0000; 
  color: #FFFFFF; 
  text-decoration: none; /* 去掉默认链接下划线 */
}

/* 下拉子菜单的hover交互效果 */
.dropdown-child a:hover {
  background-color: #2a254b; /* 子菜单hover时的背景色，可按需修改 */
}

.dropdown:hover .dropdown-child { 
  display: block; 
}

关键修改点说明 #

• 定位修复：给.dropdown-child添加position: absolute，并通过left:0和top:100%让它精准对齐父菜单的底部左侧，同时不会干扰其他元素的布局；新增z-index确保下拉菜单不会被其他元素遮挡。
• Hover效果修复：给触发下拉的a标签添加.mainmenubtn类，让你之前定义的hover样式生效；同时给子菜单的a标签也补充了hover样式，提升整体交互体验。
• 结构优化：修正了HTML里多余的闭合标签，确保ul和li的嵌套结构符合规范。
• 排版优化：调整了子菜单的内边距和最小宽度，避免文字过于拥挤。

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