后台 div 菜单问题

Question

我想制作一个带有彩色背景的菜单。我在包含菜单的 div 上使用简单的 "background" 或 "background-color"，但我没有看到任何颜色。我知道这很愚蠢，但我真的被卡住了..

这是 HTML :

 <header class="menu-top">
    <div class="menu">
        <ul>
            <li><a>Home</a></li>
            <li><a>Portfolio</a></li>
            <li><a>Contact</a></li>
        </ul>
    </div>
</header>

这是 JSFIDDLE：https://jsfiddle.net/szf1xksv/

Answer 1

由于菜单中的列表项是浮动的，因此菜单失去了它的高度。您需要清除容器后的浮动。一个简单的方法：

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

Updated fiddle.

Answer 2

另一种方法是使用：

.menu > ul > li {
  display: inline-block;
}

这将保留列表项的高度。

后台 div 菜单问题

Background div menu issue

html

css

background

menu

jsfiddle