导航栏下拉菜单尺寸异常求助：如何设置100px固定宽度？

我帮你梳理下问题的核心：下拉菜单过宽是因为浏览器默认的内边距/外边距，或者没有明确设置固定宽度；hover只有部分高亮则是因为下拉选项的宽度没占满容器，导致hover范围受限。下面给你具体的CSS调整方案：

1. 先明确下拉菜单的结构（参考常见布局） #

假设你的导航栏HTML结构是这样的（如果你的结构略有不同，对应调整类名即可）：

<ul class="topnav">
  <li><a href="#">首页</a></li>
  <li class="dropdown">
    <a href="#" class="dropbtn">下拉菜单1</a>
    <div class="dropdown-content">
      <a href="#">选项1</a>
      <a href="#">选项2</a>
    </div>
  </li>
  <li class="dropdown">
    <a href="#" class="dropbtn">下拉菜单2</a>
    <div class="dropdown-content">
      <a href="#">选项A</a>
      <a href="#">选项B</a>
    </div>
  </li>
</ul>

2. 固定下拉菜单容器宽度，清除额外空间 #

给下拉菜单的容器设置100px固定宽度，同时清除默认的内边距和外边距，避免侧边出现额外空白：

/* 下拉菜单容器 */
.dropdown-content {
  width: 100px; /* 你需要的固定宽度 */
  padding: 0; /* 清除默认内边距 */
  margin: 0; /* 清除默认外边距 */
  box-sizing: border-box; /* 关键：让padding/border不超出设置的宽度 */
}

3. 让下拉选项占满容器，hover覆盖全宽 #

设置下拉选项为块级元素，宽度100%，这样hover时整个选项区域都会高亮：

/* 下拉菜单的每个选项 */
.dropdown-content a {
  display: block; /* 块级元素才能设置宽度 */
  width: 100%; /* 占满容器宽度 */
  padding: 8px 12px; /* 按需调整内边距，box-sizing会确保不超宽 */
  box-sizing: border-box;
}

/* hover时全高亮 */
.dropdown-content a:hover {
  background-color: #f0f0f0; /* 替换成你需要的高亮颜色 */
  /* 不需要额外设置width，因为已经继承了100% */
}

4. 同步主导航下拉按钮的宽度（可选） #

如果你的主导航下拉触发按钮（.dropbtn）也需要和下拉菜单宽度一致，可以补充：

.topnav .dropbtn {
  width: 100px; /* 和下拉菜单宽度统一 */
  display: block;
  box-sizing: border-box;
  /* 其他样式：比如padding、文字对齐等 */
}

关键提示 #

• box-sizing: border-box是重中之重，它能避免元素的内边距或边框导致宽度超出你设置的100px。
• 一定要清除下拉菜单容器的默认padding/margin，很多浏览器会给列表或下拉元素加默认间距，这是导致下拉过宽的常见原因。

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