Html 后台div菜单问题

我想做一份有彩色背景的菜单。我在包含菜单的div中使用简单的“背景”或“背景色”，但我看不到任何颜色。我知道这很愚蠢，但我真的被卡住了

以下是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>

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

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

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

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

另一种选择是：

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

这将保留列表项的高度。
另一种方法是使用：

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

这将保留列表项的高度。
它可以工作，但会导致其他问题。例如，浏览器在内联阻止项之间添加的自动间距。浮动解决了这个问题。它可以工作，但会导致其他问题。例如，浏览器在内联阻止项之间添加的自动间距。浮动解决了这个问题。