不能在菜单容器上应用背景

我有宽度为100％的容器，里面有一个菜单。当我想将背景颜色应用到菜单容器时，什么也没有发生，它杀了我我无法弄清楚。它工作时，我就可以申请显示inline-block的，但为什么我需要以不同的方式显示出来的只是一个容器100％的宽度不能在菜单容器上应用背景

menu { 
    width: 100%; 
    background: #333; 
} 

.menu > ul { 
    width: 100%; 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 

.menu > ul > li { 
    float: left; 
    background: #e9e9e9; 
    display: inline-block; 
    padding: 0; 
    margin: 0; 
} 

.menu > ul > li > a { 
    text-decoration: none; 
    padding: 1.5em 3em; 
    display: inline-block; 
    outline: 0 none; 
} 

.menu > ul > li > ul { 
    display: none; 
    background: #333; 
    padding: 20px 30px; 
    position: absolute; 
    width: 100%; 
    z-index: 99; 
    left: 0; 
    color: #fff; 
    margin: 0; 
} 

.menu > ul > li:hover > ul { 
    display: block; 
}

，这是我的HTML

<div class="menu"> 
    <ul> 
    <li><a href="#">Home</a> 
     <ul> 
     This is also mega menu 
     </ul> 
    </li> 
    <li><a href="#">Who are we?</a> 
     <ul> 
     This is mega menu 
     </ul> 
    </li> 
    <li><a href="#">Services</li></a> 
     <li><a href="#">Contact</li></a> 
    </ul> 
</div>

还当我尝试将我的UL浮起来，没有任何事情发生。我是否搞乱了我的显示屏：在任何元素中？

来源

2015-10-11 riogrande

这是因为你的LI元素是浮动的。在这种情况下，容器将具有0像素的高度。您需要先清除容器（.menu）。 MENU元素也有一个小错误 - 你忘了添加DOT .menu（成为一个类，如你的html代码）。

要清除浮动，阅读>https://css-tricks.com/the-how-and-why-of-clearing-floats/

.menu:before, 
.menu:after { 
    content: ""; 
    display: table; 
} 
.menu:after { 
    clear: both; 
}

一个工作方案，对的jsfiddle，这里> jsfiddle.net/4pgvzxs0/

来源

2015-10-11 13:50:56 designarti

哇clearfix被解决，didnt甚至想想，谢谢非常！我的LI可以漂浮吗？还有其他的解决方案吗？还是这样好。在此先感谢 – riogrande

这取决于你想要达到什么，或取决于它的元素与屏幕交互的方式。漂浮是好的。内联块可能是另一个可行的解决方案，但如果我是你，我会选择浮动块。 – designarti

不能在菜单容器上应用背景

回答

相关问题