Question

我的HTML / CSS列表出了问题。

导航菜单列表上的第三个按钮是另一个列表，但是当我将光标指向它时，列表会在整个导航菜单下与“background-color”一起展开。如何使该列表仅扩展按钮下的区域？

这是我的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'元素的溢出值设置为'hidden'。溢出：隐藏元素将尝试包装其子元素，即使通常它们不会。

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

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

Answer 2

将'clearfix'添加到ol：

ol :: after { 内容：''; 显示：表; 明确：两者; }
将ol > li添加到position: absolute; top: 79px; left: 0;样式;
将ol > li > ul添加到ol>li>ul，其中79px是您身高的高度。

以下是您的{{1}}：http://codepen.io/g1un/pen/ozkdZV

背景随着列表一起扩展

2 个答案: