悬停时Dropdown菜单无法正常显示的问题排查求助

你的下拉菜单要么完全不显示、要么始终显示的核心问题出在两处：

• CSS里写了.dropdown-menu li { display: none; }，哪怕父容器.dropdown-menu被设为显示，里面的列表项还是会被隐藏，导致你看不到菜单内容。
• 存在冗余的CSS规则（比如.Dropdown和ul li ul.dropdown），可能和目标样式冲突，干扰正常的显示逻辑。

修复后的完整CSS代码 #

ul li {
  position: relative;
}

ul li a {
  display: block;
  /* 可选：添加内边距，扩大悬停触发范围，提升交互体验 */
  padding: 10px 15px;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  z-index: 1000;
}

.dropdown-menu a {
  padding: 10px 20px;
  display: block;
  color: #000;
}

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

关键修复说明 #

1. 删除冗余规则：去掉了.Dropdown（大小写与HTML中的dropdown不匹配，且无作用）和ul li ul.dropdown这两条多余的CSS，避免样式冲突。
2. 恢复列表项显示：移除了.dropdown-menu li { display: none; }，让下拉菜单里的选项能正常展示。
3. 优化触发区域：给导航链接添加内边距，扩大鼠标悬停的触发范围，防止鼠标轻微移动就导致菜单消失。

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