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

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

您需要将填充应用于锚元素（而不是其容器），以使其具有较大的悬停背景。我还将锚元素上的显示从inline-block更改为block-否则它们在导航容器中不显示全宽。

我修改了您的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 page structure-这对于确保页面标记正确无误非常有帮助。多数日子我仍然看它：-）

祝你好运！