不能在菜單容器上應用背景

我有寬度爲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

不能在菜單容器上應用背景

回答

相關問題