CSS：在父<ul>旁边显示子<ul>，顶部对齐</ul> </ul>

Question

我有一个<ul>嵌套在<ul>中，例如：

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item
    <ul>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ul>
  </li>
  <li>Item</li>
</ul>

我使用jquery将嵌套列表滑动到第一个列表的右侧，以便它们并排显示。我的问题是，第二个列表在顶部有一点差距，2个列表项高位于其父列表项的“扩展”。

由于我的jquery导航设置，两个ul都有左浮动和位置绝对。我可以对齐它们的唯一方法是将负边距设置为第二个ul，但我想避免这种情况。

有人知道如何实现这一目标吗？

我的CSS :(注意我有一个JQuery onClick函数，可以将它们向右滑动以适应各种长度）

#menu UL
{
        position: absolute;
    float: left;
    margin-top: 14px;
    width: 300px;
    height: 320px;
}

#menu UL LI UL
{
        position: absolute;
    float: left;
    margin-top: 14px;
    width: 300px;
    height: 320px;
}

Answer 1

在top: 0px上设置UL LI UL，如果您想要删除顶部的14个像素空间，也可以在其上设置margin-top: 0px;。

的 jsFiddle

UL
{
    position: absolute;
    float: left;
    margin-top: 14px;
    width: 300px;
    height: 320px;
    border: 1px solid;
}

UL LI UL
{
    position: absolute;
    float: left;
    margin-top: 14px;
    width: 300px;
    height: 320px;
    top: 0px;
}