HTML/CSS下拉菜单故障求助：悬停不显示子项或布局混乱

我仔细看了你提供的代码，下拉菜单失效和布局混乱的问题主要出在CSS的选择器逻辑、定位规则以及重复样式上，咱们一步步来修复：

核心问题分析 #

1. 你错误地把子菜单的隐藏规则加在了<li>上，而不是包裹子项的<ul>；
2. 触发子菜单显示的选择器完全不符合DOM层级逻辑；
3. 子菜单使用position: absolute但父元素未设置position: relative，导致子菜单相对于页面而非父项定位；
4. 重复的CSS规则和不合理的float、height设置打乱了布局。

修复后的关键CSS代码 #

替换你原来的导航相关CSS部分，下面是修正后的版本：

/* Header ======== */
header {
  position: absolute;
  left: 0;
  right: 0;
  margin-top: 0em;
}
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
  background-color: transparent;
  display: inline-block;
}
/* 给包含子菜单的父li设置相对定位，让子菜单基于它定位 */
nav ul li {
  display: inline-block;
  margin: 1em;
  position: relative; /* 新增：关键定位规则 */
}
nav ul li a {
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
  font-size: .8rem;
  padding: .5em;
  color: #FFF;
}
nav a:hover, nav a:focus {
  color: #b21acd;
}
nav .current {
  color: #b21acd;
}

/* 子菜单基础样式：默认隐藏 */
nav ul li ul {
  position: absolute;
  top: 100%; /* 子菜单贴在父项底部 */
  left: 0;
  margin: 0;
  padding: 0;
  background-color: black;
  display: none; /* 默认隐藏子菜单 */
  min-width: 180px; /* 给子菜单设置最小宽度，避免内容挤在一起 */
  z-index: 999; /* 确保子菜单在最上层 */
}
/* 子菜单项样式 */
nav ul li ul li {
  display: block; /* 子项纵向排列，去掉inline-block和float */
  margin: 0;
  line-height: 40px;
  font-size: 12px;
  text-align: left; /* 子项文字左对齐更美观 */
}
nav ul li ul li a {
  display: block;
  padding: 0 16px;
  color: #FFF; /* 把文字改成白色，适配黑色背景 */
}
nav ul li ul li a:hover {
  background-color: #b21acd; /* 子项hover时的背景高亮 */
}

/* 鼠标悬停父li时，显示子菜单 */
nav ul li:hover > ul {
  display: block;
}

额外优化点 #

1. 合并了重复的nav ul和nav li规则，避免样式冲突；
2. 给子菜单设置了min-width，防止短内容导致菜单过窄；
3. 调整了子菜单项的文字颜色和hover效果，提升可读性；
4. 移除了原来不合理的height:86px和float:left，避免子菜单被截断或横向排列。

测试效果 #

现在鼠标悬停在Forums、Punishments这些父项上时，子菜单会正常向下展开，布局也不会混乱，子菜单会精准定位在父项的正下方。

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