下拉菜单悬停:颜色不完全填充所需元素的背景

Question

.nav-main {
background-color:#09F;
width:100%;
height:100px;
color:#FFF;
line-height:40px;
}
.nav-main .logo{
float:left;
padding: 40px 5px;
font-size:1.4em;
line-height: 20px;
}
.nav-main > ul {
margin:0;
padding:0;
float:left;
list-style-type:none;
}
.nav-main > ul > li {
float:left;
}
.nav-item{
display:inline-block;
padding: 40px 15px;
height:20px;
line-height:20px;
text-decoration:none;
color:#FFF;
}
.nav-item:hover {
background-color:#03C;
}
.nav-content {
position:absolute;
top:100px;
overflow:hidden;
background-color:#09F;
opacity: .9;
max-height:0px; 
border:1px;
box-shadow: 1px 1px #FFF;
}
.nav-content a{
color:#fff;
text-decoration:none;
}
.nav-content a:hover{
text-decoration:underline;
background-color:#03C;
}
.nav-sub {
padding:20px;
}
.nav-sub ul {
padding:0;
margin:0;
list-style-type:none;
}
.nav-sub ul li a{
display:inline-block;
text-align:center;
}
.nav-item:focus ~ .nav-content{
max-height:400px;
-webkit-transition:max-height 400ms ease-in;
-moz-transition:max-height 400ms ease-in;
}

你好 我正在尝试用 #03C 完全填充悬停元素的背景，但它不起作用，你能向我解释一下吗？到目前为止，它只填充无序列表项中的文本长度。我昨天开始了HTML5和CSS，所以我对这里出了什么问题一无所知。 谢谢你的帮助。

Answer 1

您需要将填充应用于锚元素(而不是其容器(，以便它在悬停时具有大背景。我还将锚元素上的显示从内联块更改为块 - 否则它们不会在导航容器中显示全宽。

我修改了你的css：

.nav-sub {
// removed the padding from here
}
.nav-sub ul {
padding: 0;
margin: 0;
list-style-type: none;
}
.nav-sub ul li a {
display: block;
text-align: center;
padding: 20px;
}

这是小提琴 https://jsfiddle.net/f1edrmo5/1/

我还建议您查看HTML5页面结构 - 这对于保持页面标记正确非常有帮助。我大部分时间仍然看它：-(

祝你好运！