UL LI css菜单问题

Question

查看包含UL的<{3}}：

<ul id="accordion2">
  <li>
    <div class="menuText">Product 1</div>
    <ul>
      <li><a href="c-77-accessories.aspx">Accessories</a><ul>
          <li><a href="c-81-AAAC.aspx">AAAC</a></li>
          <li><a href="c-79-AAAC.aspx">AAAC</a></li>
          <li><a href="c-80-AAAC.aspx">AAAC</a></li>
          <li><a href="c-78-AAAC.aspx">AAAC</a></li>
        </ul>
      </li>
      <li><a href="c-82-consumables.aspx">Consumables</a></li>
      <li><a href="c-76-products.aspx">Products</a></li>
    </ul>
  </li>
  <li>
    <div class="menuText">Product 2</div>
    <ul>
      <li><a href="c-101-accessories.aspx">Accessories</a></li>
      <li><a href="c-102-consumables.aspx">Consumables</a></li>
      <li><a href="c-100-products.aspx">Products</a></li>
    </ul>
  </li> 
</ul>

...和我的CSS：

ul#accordion2 li ul li {
display:none;
}

ul#accordion2 li:hover ul li {
display:block;
}

我想将鼠标悬停在div上以显示选项，然后将鼠标悬停在配件上应显示li选项。

我无法向UL LI添加类，因为它是在XML包中创建的。

应该飞出jsfiddle。我怎么能实现这个目标？

编辑：这是差距 -

Answer 1

下面

#accordion2 li {
    position: relative;
    width: 150px;
}

#accordion2 ul {
    display: none;
    position: absolute;
    left: 151px;
    top: 0;
}

#accordion2 li:hover > ul {
    display: block;
}

现场演示： http://jsfiddle.net/cJCrj/6/

Answer 2

应该能够做到这样的事情：

http://jsfiddle.net/WvXWf/

基本上，您相对定位每个li，然后在悬停时使用绝对定位将其子ul显示在旁边，并将display: none切换为display: block。

这是相关的CSS：

#accordion2 li {
    position: relative;
    width: 100px;
}
    #accordion2 li > ul {
        display: none;
        position: absolute;
        top: 0;
        left: 100px;
    }
    #accordion2 li:hover > ul {
        display: block;
    }

这是一个稍微漂亮的演示：http://jsfiddle.net/WvXWf/1/