CSS：在父项旁边显示子项，<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导航设置都有浮动左和绝对位置。我唯一可以对齐它们的方法是设置一个负的margin-top到第二个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;
}