HTML/CSS 悬停下拉菜单在导航栏内显示不全，如何修复？

2026-11-04数据小许

不需要先把下拉菜单移出导航栏。先修正悬停选择器，再为菜单设置明确的定位参照。仅凭给出的 CSS，无法确定导航栏是否裁剪了菜单，因为代码中没有设置会裁剪内容的 overflow。

为什么原来的悬停规则没有显示菜单？

这段规则中的逗号表示两个独立的选择器：

.dropdown:hover, .content {
  display: block;
}

它们分别匹配处于悬停状态的 .dropdown 和所有 .content 元素，并没有表达“悬停时显示内部菜单”。前面的 .dropdown .content { display: none; } 比单独的 .content 优先级更高，因此菜单仍然隐藏。

应改为：

.dropdown:hover .content {
  display: block;
}

这条规则匹配悬停容器内部的 .content。鼠标从按钮移到菜单链接上时，只要仍在 .dropdown 内，菜单就会继续显示。

如何修改现有 CSS？

HTML 可以保持原样。将原来的 CSS 替换为下面这组样式：

/* Navigation */
nav {
  display: flex;
  align-items: center;
  font-family: 'Lucida Sans', 'Lucida Sans Regular',
    'Lucida Grande', 'Lucida Sans Unicode',
    Geneva, Verdana, sans-serif;
  background-color: rgb(58, 73, 69);
  padding: 0;
  margin: 2% 0 2% 26%;
  border-radius: 5px;
  width: 65%;
  overflow: visible;
}

nav > a,
.dropbtn {
  display: block;
  background-color: rgb(58, 73, 69);
  color: white;
  padding: 12px 18px;
  text-decoration: none;
  font: inherit;
}

nav > a:hover,
.dropbtn:hover {
  background-color: rgb(148, 247, 82);
  color: black;
}

/* Hover dropdown menu */
.dropdown {
  position: relative;
}

.dropbtn {
  border: none;
  cursor: pointer;
}

.dropdown .content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 160px;
  background-color: hsl(0, 0%, 90%);
  text-align: center;
  box-shadow: 2px 2px 5px hsl(237, 65%, 70%);
  z-index: 1000;
}

.dropdown .content a {
  display: block;
  padding: 12px 18px;
  background-color: hsl(0, 0%, 90%);
  color: black;
  text-decoration: none;
}

.dropdown .content a:hover {
  background-color: rgb(148, 247, 82);
}

.dropdown:hover .content,
.dropdown:focus-within .content {
  display: block;
}

其中：

.dropdown { position: relative; } 让绝对定位的菜单以按钮容器为定位参照。
top: 100%; left: 0; 让菜单紧接容器底部，并与容器左侧对齐。
固定内边距替换了原来的大比例 padding，使按钮和菜单项的尺寸更容易控制。百分比 padding 通常相对于包含块的宽度计算，原来的 57%、54% 和 20% 容易造成异常大的间距。
:focus-within 让菜单在按钮或内部链接获得焦点时也能显示，方便键盘操作。

示例中的 160px 和 z-index: 1000 是可调整的样式值，不是 Bootstrap 的必要参数。

如果菜单仍然显示不全，检查哪里？

在浏览器开发者工具中，让 .dropdown 保持 :hover 状态，先确认 .content 的计算样式是否为 display: block，再沿着 DOM 向上检查祖先元素。

如果某个祖先设置了 overflow: hidden、overflow: clip，或形成了限制可见区域的滚动容器，菜单可能被裁剪。此时需要根据布局调整该祖先的溢出设置；仅给 nav 设置 overflow: visible，无法解除其他祖先造成的裁剪。

如果菜单只是被其他元素盖住，应检查 z-index 和相关层叠上下文。提高 z-index 不能解决祖先的 overflow 裁剪。

原问题没有提供 Bootstrap 版本和完整页面样式，因此无法确认框架样式是否参与了冲突。如果修正后仍有异常，应查看开发者工具中实际生效的规则，尤其是 .dropdown、.content 和导航栏祖先的样式。若只是自定义 CSS 悬停菜单，上面的结构无需依赖 Bootstrap JavaScript。