菜单a：悬停 - 尝试获取整个栏中的背景颜色

Question

我正在尝试将a：悬停在我创建的菜单上。如果你能帮助我，我真的很感激！我想要实现的是在整个酒吧中获得黑色。如果你知道我的意思。

这是菜单:(黑色悬停）

所以这是菜单的CSS：

#navigation {
padding: 5px;
height: 1em;
width: auto;
text-align: center;
font-family: Verdana;
font-size: 12px;
text-transform: uppercase;
margin-top: -5px;
}

#navigation ul {
background-color: #fff;
width: 1000px;
margin-left: -5px;
}

#navigation li {
float: left;
list-style: none;
width: 100px;
background-color: #fff;
padding: 10px;
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.235), 0px 0px 5px rgba(0, 0, 0, 0.047);
}

#navigation li ul {
padding: 5px;
display: none;
width: em;
background-color: #fff;
}

#navigation li a:hover {
background-color: #000;
padding:10px;
width: 300px;
color: #fff;
position:absolute;
}

#navigation a { 
color: #000;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

#navigation a:link {    
color: #000;
}

#navigation a:hover {   
color: #fff;
background-color: #000;
}

#navigation a:visited { 
color: #000;
}

因此，如果您需要更多相关信息，请访问我的网站，您可以自己查看该问题。 http://tomaswebdesign.com

Answer 1

您有两个选项，第一个是最简单的，只需将:hover添加到li本身：

li:hover,
a:hover  {
    color: #fff;
    background-color: #000;
}

JS Fiddle demo。对于上述解决方案，我还建议（在链接演示中包含）您在color: inherit元素上设置a（{em> not 在{{1}下） }）

第二种是将a:hover设置为块元素：

a

这确实要求您从a { display: block; /* to fill the available horizontal space */ height: 100%; /* to fill the available vertical space */ } 元素中移除padding，因为这是“强迫”li远离元素的边缘，所以：

background-color

JS Fiddle demo

Answer 2

试试这个

#navigation li {
    display:block;
    float: left;
    list-style: none;
    width: 100px;
    background-color: #fff;
    padding: 10px;
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.235), 0px 0px 5px rgba(0, 0, 0, 0.047);
}

或者您可以将锚width和height设置为100％。