html - 背景随列表展开

Question

我用 HTML/CSS 制作的列表有问题。

我的导航菜单列表上的第三个按钮是另一个列表，但是当我将光标指向它时，该列表会随着整个导航菜单下的“背景色”展开。如何使该列表仅扩展按钮下方的区域？

这是我的部分CSS代码

ol {
  list-style-type: none;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background-color: #1a1a1a;
  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  font-size: 20px;
}
ol a {
  display: block;
}
ol > li {
  float: left;
  width: 15%;
}
ol li a {
  background-color: #1a1a1a;
  display: block;
  color: white;
  text-align: center;
  text-decoration: none;
  padding: 10px 15px 15px 15px;
}
ol li a:hover {
  background-color: #111;
}
ol > li > ul {
  display: none;
  list-style-type: none;
  padding: 0;
  margin: 0;
}
ol > li:hover > ul {
  display: block;
}
ol > li > ul > li {
  position: relative;
}

<ol>
  <li><a href="index.html"> &#9745; Strona główna</a>
  </li>
  <li><a href="index.html"> &#9745; Muzyka</a>
  </li>
  <li><a href="index.html"> &#9745; Streetwear</a>
    <ul>
      <li><a href="index.html">Ubrania</a>
      </li>
      <li><a href="index.html">Buty</a>
      </li>
    </ul>
  </li>
  <li><a href="index.html"> &#9745; Wideo</a>
  </li>
  <li><a href="index.html"> &#9745; Lifestyle</a>
  </li>
  <li><a href="index.html"> &#9745; O nas</a>
  </li>
</ol>

Answer 1

在您的 CSS 代码中，您将“ol”元素的溢出值设置为“隐藏”。溢出:隐藏元素会尝试包裹它们的子元素，即使它们通常不会。

在这种情况下，由于这个属性，有序列表中的所有内容都包含在其中。

要解决此问题，您可以在 CSS 代码中删除有序列表 (ol) 的溢出或背景色。