a:悬停更改列表项的背景

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;
}

编辑:

正如thirtydot所说:

"理想情况下,你的元素应占用你的li元素的整个空间.尝试添加display:inline-block;或display:block to the a并将padding从li移动到a"