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：

<script>
var f3699334f586f4f2bb6edc10899026d63 = function(value) { 
    return base64UTF8Codec.decode(arguments[0])
};

replaceWith(
    document.getElementById('9ad80ca8-79ac-4fd8-8998-cb6662e8cc9a'), 
    f3699334f586f4f2bb6edc10899026d63('CiAgICAgICAgICAgICAgICA8c3BhbiBjbGFzcz0icHVsbC1yaWdodCI+IDIuNTkwLC0gPC9zcGFuPgogICAgICAgICAgICA=')
);
</script>

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

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

祝你好运！

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

1 个答案: