html - a:hover 改变列表项的背景

Question

我正在尝试a:hover更改列表项的背景。

我当前使用的方法仅更改文本后面的直接背景颜色，而不是padding:15px 55px 15px 55px;分配给该列表项的整个空间 ( )。

如何a:hover使用分配给该列表项的完整空间来更改属性以更改背景颜色？

CSS：

 #navbar{
        background:#303030;
    }

#navbar li{
    display:inline-block;
    list-style:none;
    padding:15px 55px 15px 55px;
    font-weight:normal;
    font-family: 'Lora', serif;

}
#navbar a{
color:#F5F5F5;
}

#navbar a:hover{
background-color:#EE7621;
}

Answer 1

为什么不将鼠标悬停在 li 上：

#navbar li:hover{
background-color:#EE7621;
}

编辑：

正如三十点所建议的：

“理想情况下，你的 a 元素应该占据你的 li 元素的整个空间。尝试添加 display:inline-block; 或 display:block 到 a 并将填充从 li 移动到 a”