html - 嵌套列表不 float

Question

我正在尝试创建一个带有 float 嵌套列表的简单菜单。我的想法是一次显示所有嵌套列表(如大型菜单)，但由于 float 元素清除了正确的 float 嵌套列表，我不断得到不需要的空白。

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

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

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

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

Answer 1

我需要的答案是由 Pete 作为评论提供的(因此我无法将其标记为正确答案)。

解决方案是放弃 float ，改用列数。我还根据 How to prevent column break within an element? 向子元素添加了“inline-block”以避免元素内的分栏符.

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>

谢谢!