具有浮动和非浮动列表项的构建菜单

Question

使用代码片段中给出的html结构（结构不能改变，我只能改变CSS），我想实现以下菜单布局：

但我的CSS导致“Item 1a”和“Item 2”之间存在差距：

不知道这个差距来自哪里，并且想知道如何实现所需的布局。

ul,
li {
  display: block;
  float: left;
}

ul.menu li {
  padding-right: 1em;
}

ul.submenu li {
  display: block;
  float: none;
}

div {
  height: 0;
  float: left;
  padding-left: 1em;
}

<nav>
  <ul class="menu">
    <li><a href="#1">Item 1</a>
      <div>
        <ul class="submenu">
          <li><a href="#1a">Item 1a</a></li>
          <li><a href="#1b">Item 1b</a></li>
          <li><a href="#1c">Item 1c</a></li>
          <li><a href="#1d">Item 1d</a></li>
        </ul>
      </div>
    </li>
    <li><a href="#2">Item 2</a></li>
    <li><a href="#3">Item 3</a></li>
    <li><a href="#4">Item 4</a></li>
  </ul>
</nav>

Answer 1

删除了UL和LI上的填充和边距，删除了高度：div上的0。似乎工作。在李先生的帮助下，我的立场得到了纠正。

ul,
li {
  display: block;
  margin-left: 0px;
  padding-left: 0px;
}

ul.menu li {
  padding-right: 1em;
}

ul.menu > li {
  float: left;
}

ul.menu > li > a {
  display: block;
}

ul.submenu li {
  display: block;
}

div {
  float: left;
  padding-left: 1em;
}

<nav>
  <ul class="menu">
    <li><a href="#1">Item 1</a>
      <div>
        <ul class="submenu">
          <li><a href="#1a">Item 1a</a></li>
          <li><a href="#1b">Item 1b</a></li>
          <li><a href="#1c">Item 1c</a></li>
          <li><a href="#1d">Item 1d</a></li>
        </ul>
      </div>
    </li>
    <li><a href="#2">Item 2</a></li>
    <li><a href="#3">Item 3</a></li>
    <li><a href="#4">Item 4</a></li>
  </ul>
</nav>