求助：鼠标悬停时如何让submemu背景铺满整个容器宽度

问题根源 #

你的代码里有几个核心问题导致背景无法覆盖子菜单全宽：

• 类名拼写不一致：CSS写的是.submenu，但HTML里用的是submemu，样式根本没正确作用到元素上
• 子菜单<ul>自带默认左内边距，限制了内部元素的宽度范围
• 给<a>加position: absolute会让它脱离文档流，宽度计算完全混乱
• <a>默认是行内元素，就算设了宽度也没法占满父容器的全部空间

修复方案 #

1. 统一类名 #

把HTML里的submemu改成submenu，确保CSS能匹配到目标元素。

2. 重置列表默认样式 #

去掉<ul>的默认内边距、外边距和列表符号，避免干扰布局。

3. 让链接占满列表项宽度 #

把<a>设为块级元素，或者直接给<li>设置悬停样式，配合内边距调整，保证背景能铺满整个区域。

修改后的完整代码 #

HTML

<ul>
  <li><a href=index.html>home</a></li>
  <li class="dropdown">
    <a href="index2.html">home2</a>
    <ul class="submenu">
      <li><a href="txt.html">link1</a></li>
      <li><a href="txt2.html">link link2</a></li>
    </ul>
  </li>
</ul>

CSS

/* 重置全局ul默认样式，消除浏览器默认布局干扰 */
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dropdown {
  height: 50px;
  width: auto;
  padding: 10px 20px;
  color: white;
  background: grey;
  /* 设置相对定位，让子菜单的绝对定位基于它 */
  position: relative;
}

.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  min-width: 200px;
}

/* 鼠标悬停主菜单时显示子菜单 */
.dropdown:hover .submenu {
  display: block;
}

.submenu li {
  width: 100%;
}

.submenu li a {
  display: block;
  padding: 10px 20px;
  color: #333;
  text-decoration: none;
}

.submenu li a:hover,
.submenu li a:focus {
  background: blue;
  color: white;
}

效果说明 #

修改后，鼠标悬停子菜单链接时，蓝色背景会铺满整个子菜单宽度：

• <a>被设为块级元素，会自动占满父<li>的全部宽度
• 子菜单<ul>去掉了默认内边距，内部元素可以完全展开
• 移除了<a>上的绝对定位，宽度计算回归正常

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