html - 在整个菜单栏中显示背景

Question

我的水平菜单有这个 CSS:

#nav>li {
    float:left
}
#nav li:hover ul {
    position:absolute;
     display:block;
}
#nav {
    margin:20px 0 0 0;
    left:0;
    width: 100%; 
    list-style:none;
}
#nav li a {
    display: inline-block; 
    padding: 8px;
    margin:0;
    background: #666666; 
    border-top: 1px solid #EEEEEE; 
    border-bottom: 1px solid #EEEEEE; 
    text-decoration: none; 
    color: #EEEEEE;
    width:80px;
    border-right:1px solid #F36F25;
}
#nav li a:hover, #nav li a.active {
    background: #F36F25; 
    color: #FFFFFF;
    cursor:pointer;
}
#nav li ul {
    display: none;
    list-style:none;
    margin:0;
}
#nav li ul li {
    margin-top:0;
    margin-right:0;
    margin-bottom:0;
    margin-left:-40px;
}
#nav li ul li a {
    background: #EEEEEE;
    color:#666666;
    border:1px solid #EEEEEE;
    width:145px;
}
#nav li ul li a:hover {
    background: #EEEEEE;
    color:#f36f25;
    border:1px solid #f36f25;
}

我想为页面的 100% 宽度添加背景颜色，我尝试将 background-color:#666666; 添加到

#nav

但这没有用，这里是完整代码的 fiddle :http://jsfiddle.net/39Rdw/

我希望菜单占页面宽度的 100%

Answer 1

问题是 <li>在 #nav 下标记向左浮动，保持 #nav从环绕它的内部内容。如果添加 clearfix css到你的CSS并将这个类添加到你的#nav '` 它将强制它环绕内部内容，并应为您提供您正在寻找的效果。

Fiddle

还有 <li>应该包裹在 <ul> 中标签。您可能想要更改任何 <li>它没有包裹在 <ul> 中到 <div> .