Question

我有宽度为100％的容器，里面有一个菜单。当我想将背景颜色应用到菜单容器时没有任何反应，它杀了我我无法弄明白。它适用于我在其上应用显示内联块但为什么我需要以不同的方式显示它只有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浮动到右边时，没有任何反应。我弄乱了我的显示器：在任何元素中？

Answer 1

那是因为你的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，这里＆gt; jsfiddle.net/4pgvzxs0 /

无法在菜单容器上应用背景

1 个答案: