html - 如何使 ul 与父 li 大小相同？

Question

我正在使用下拉菜单，但内部 ul 的大小有问题 我试图使其与父级 li 的大小相同.

谁能告诉我我做错了什么？

Here是我的代码的演示。

* {
  margin: 0px;
  padding: 0px;
}
ul.topMenu {
  background: #111;
  overflow: hidden;
}
ul.topMenu li {
  float: left;
  list-style: none;
}
ul.topMenu li a {
  padding: 12px 15px;
  display: block;
  color: white;
  text-decoration: none;
  transition: .4s;
  border-right: 1px solid #fff;
}
ul.topMenu li:first-child a {
  border-left: 1px solid #222222;
}
ul.topMenu li a:hover,
ul.topMenu li a:focus {
  background: black;
}
ul.topMenu ul {
  position: absolute;
  background: #222;
}
ul.topMenu ul li {
  float: none;
}

<ul id="topMenu" class="topMenu">
  <li><a href="#">Sed ut perspiciatis </a>
  </li>
  <li><a href="#">Nemo enim </a>
    <ul>
      <li><a href="#">Sit amet </a>
      </li>
      <li><a href="#">Excepteur </a>
      </li>
      <li><a href="#">Neque  </a>
      </li>
    </ul>
  </li>
  <li><a href="#">Neque porro </a>
  </li>
  <li><a href="#">Ut enim ad </a>
  </li>
  <li><a href="#">Quis autem vel eum </a>
    <ul>
      <li><a href="#">Sit amet </a>
      </li>
      <li><a href="#">Excepteur </a>
      </li>
      <li><a href="#">Neque  </a>
      </li>
    </ul>
  </li>
</ul>

Answer 1

注意事项:

• 为了使您的 ul 元素与它的 li 父元素一样宽，您有将其位置更改为 position: relative，以便您可以使用 width: 100%。

• 然后你必须从 ul.topMenu 中删除 overflow: hidden 并设置一个固定的高度。设置 height: 42px 就可以了。

代码:

ul.topMenu ul {
    position: relative;
    width: 100%;
}

ul.topMenu {
    height: 42px;
}

jsFiddle: → here .

片段:

* {
  margin: 0px;
  padding: 0px;
}

ul.topMenu {
  background: #111;
  height: 42px;
}

ul.topMenu li {
  float: left;
  list-style: none;
}

ul.topMenu li a {
  padding: 12px 15px;
  display: block;
  color: white;
  text-decoration: none;
  transition: .4s;
  border-right: 1px solid #fff;
}

ul.topMenu li:first-child a {
  border-left: 1px solid #222222;
}

ul.topMenu li a:hover,
ul.topMenu li a:focus {
  background: black;
}

ul.topMenu ul {
  position: relative;
  background: #222;
  width: 100%;
}

ul.topMenu ul li {
  float: none;
}

<ul id="topMenu" class="topMenu">
  <li><a href="#">Sed ut perspiciatis </a></li>
  <li><a href="#">Nemo enim </a>
    <ul>
      <li><a href="#">Sit amet </a></li>
      <li><a href="#">Excepteur </a></li>
      <li><a href="#">Neque  </a></li>
    </ul>
  </li>
  <li><a href="#">Neque porro </a></li>
  <li><a href="#">Ut enim ad </a></li>
  <li><a href="#">Quis autem vel eum </a>
    <ul>
      <li><a href="#">Sit amet </a></li>
      <li><a href="#">Excepteur </a></li>
      <li><a href="#">Neque  </a></li>
    </ul>
  </li>
</ul>