html - 背景颜色不适用于列表和列表项

Question

我贴了一张照片让你看看我到底有什么问题。我不明白为什么样式不适用于 ul 和 li。我将背景样式应用于导航容器，所以我相信应该将其应用于每个元素，对吗？

我可以使用一些帮助和一些解释来理解这件事。

header {
  background-image: url('Logos\ and\ Assets/cover.jpg');
  height: 100vh;
  background-size: cover;
  background-position: center;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  padding: 10px 10%;
  background-color: rgba(153, 217, 140, 0.3);
}

.nav-ul-2 {
  list-style-type: none;
}

.nav-ul-2 li {
  display: inline-block;
  padding: 0% 20px;
}

.nav-ul-1 {
  list-style-type: none;
}

.nav-ul-1 li {
  transition: all 0.3s ease 0s;
}

.nav-ul-1 li:hover {
  color: yellowgreen;
}

.nav-ul-2 li {
  [enter image description here][1] transition: all 0.3s ease 0s;
}

.nav-ul-2 li:hover {
  color: yellowgreen;
}

<header>
  <nav class="nav-container">
    <ul class="nav-ul-1">
      <li>Acasa</li>
    </ul>
    
    <ul class="nav-ul-2">
      <li>Servicii</li>
      <li>Despre Noi</li>
      <li>Contact</li>
    </ul>
    
    <div>
      <img src="Logos and Assets/roFlag.svg" class="flag" alt="ro-flag">
      <img src="Logos and Assets/englFlag.svg" class="flag" alt="eng-flag">
    </div>
  </nav>
</header>

标签： htmlcssflexboxcss-selectorshtml-lists

Answer 1

我不明白你在这里尝试什么，因为你的导航在我看来像这样的背景颜色：