更改悬停时的背景

Question

我希望整个背景在悬停时发生变化。目前，颜色变化的宽度包含原始文本加上填充的宽度，而不是 submemu 的整个宽度。 我尝试了以下方法。

HTML 代码

`

• 家
主页2
• 链接1
• 链接链接2

CSS 代码

.dropdown {
height: 50px;
width: auto;
padding: 10px 20px;
color: white;
background: grey;
}

.submenu {
display: none;
}

.submemu li a:hover,
.submemu li a:focus{
background: blue;
color: white;
position: absolute;
width : 100%;
padding : 10px 20px;
white-space : nowrap;
}`

上述代码的结果仅更改了带有填充的文本周围的下拉内容的背景，但没有更改容器 submemu 的整个宽度。

Answer 1

代替：

.submenu li a:hover,
.submemu li a:focus,{
background: blue;
color: white;
position: absolute;
width: 100%;
padding: 10px 20px;
white-space: nowrap;
}

使用 .子菜单li：悬停， .submemu li:焦点,{ 背景：蓝色； 白颜色; 位置：绝对； 宽度：100%； 显示：块； 内边距：10px 20px； 空白：nowrap； }