html - 嵌套列表不 float

我正在尝试创建一个带有浮动嵌套列表的简单菜单。这个想法是一次显示所有嵌套列表（如大型菜单），但是由于浮动元素清除了正确的浮动嵌套列表，所以我不断得到不必要的空格。

JSFiddle在这里：https://jsfiddle.net/agenturallison/mrf5e820/21/

问题是“ Level2 THIS” li元素上方的空间不应存在。

如何在不清除右侧任何内容的情况下强制浮动的LI元素浮动？

HTML代码：

ul {
  list-style:none;
  margin: 0;
  padding: 0;
}

li {
  margin: 0;
  padding: 0;
}

a {
  color: #fff;
}

#container {
  width: 400px;
}

#container li {
  width: 200px;
  float: left;
  background: blue;
}

#container .level3 {
background: green;
height: 100px;
overflow: visible;
}

#container .level3 li {
  background: black;
  opacity: 0.5;
}

<ul id="container">

  <li><a href="#">Level 2</a>
    <ul class="level3">
      <li><a href="#">Level 3</a></li>
    </ul>
  </li>

	<li><a href="#">Level 2</a></li>

	<li><a href="#">Level 2</a></li>

	<li><a href="#">Level 2</a>
    <ul class="level3">
      <li><a href="#">Level 3</a></li>
    </ul>
  </li>

	<li><a href="#">Level 2 THIS</a></li>

	<li><a href="#">Level 2</a>
    <ul class="level3">
      <li><a href="#">Level 3</a></li>
   </ul>
  </li>

</ul>

like this是我视觉上想要的一个示例

这是我要摆脱的空间：JSFiddle screenshot

最佳答案

我需要的答案由Pete作为注释提供（因此，我无法将其标记为正确答案）。

解决方案是放弃浮点数，而改用列数。我还向子元素添加了“ inline-block”，以避免按照How to prevent column break within an element?在元素内出现列中断。

ul {
  list-style:none;
  margin: 0;
  padding: 0;
  column-count:2;
  column-gap:0;
}

li {
  margin: 0;
  padding: 0;
}

a {
  color: #fff;
}

#container {
  width: 400px;
}

#container li {
  width: 200px;
  background: blue;
  display: inline-block;
}

#container .level3 {
background: green;
height: 100px;
overflow: visible;
width: 200px;
}

#container .level3 li {
  background: black;
  opacity: 0.5;
}

<ul id="container">

  <li><a href="#">Level 2</a>
    <ul class="level3">
      <li><a href="#">Level 3</a></li>
    </ul>
  </li>

	<li><a href="#">Level 2</a></li>

	<li><a href="#">Level 2</a></li>

	<li><a href="#">Level 2</a>
    <ul class="level3">
      <li><a href="#">Level 3</a></li>
    </ul>
  </li>

	<li><a href="#">Level 2 THIS</a></li>

	<li><a href="#">Level 2</a>
    <ul class="level3">
      <li><a href="#">Level 3</a></li>
   </ul>
  </li>

</ul>

谢谢！

关于html - 嵌套列表不 float ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51537219/