如何实现Bootstrap 5下拉菜单hover效果占满整个可见宽度

问题原因 #

你遇到的问题来自两个错误：

• 语法错误：你写的ul.dropdown-menu.show li a规则末尾误用冒号:代替了CSS要求的分号;，导致整条宽度规则完全不生效。
• 样式冲突：你全局定义的.menu ul li { display: inline-block; }规则作用到了下拉菜单内部的li元素上，导致下拉的li不会占满父容器的全部宽度，就算a标签宽度设为100%也无法撑满整个菜单。

修复方案 #

把你CSS中对应下拉菜单的部分替换为以下代码即可：

/* 重置下拉菜单li的样式，避免被全局menu规则覆盖 */
ul.dropdown-menu.show li {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

ul.dropdown-menu.show li a {
  width: 100%; /* 修正原代码的冒号为分号 */
  display: block;
}

/* 你的hover规则本身是正确的，不需要修改 */
ul.dropdown-menu.show a:hover {
  background-color: #000;
  color: #fff;
}

实现逻辑说明 #

Bootstrap 5的下拉菜单.dropdown-menu本身默认是块级容器，内部的.dropdown-item默认就是全宽块级元素，你的全局自定义样式覆盖了下拉内li的默认行为，才导致宽度异常。修复后下拉内的li会占满整个菜单宽度，a标签作为块级元素占满li的全部宽度，hover时的背景自然就能覆盖整个菜单的可见宽度了。

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