复杂的嵌套UL导航

Question

我正在尝试将三级UL变成易于使用的导航系统。

我的想法是拥有第一个UL，它是Li的展示，但是隐藏了Ul ul ul ul ul，以及他们各自的Li。

我希望有人能够单击顶部的li，然后在li中显示ul。

那么，这个想法是父母ul与li一起隐藏，但不是我刚选择的sub ul。

如果单击另一个Li，则表明Li的孩子UL，它是Li的。

效果只会在任何时候显示一个UL。

我知道这很复杂，而且我无法理解这将是如何做到的 - 我猜想CSS和JQuery的组合，我尝试了各种事情，并搜索了很多地狱，因此我正在诉诸这一问题。

如果有人对我所说的内容以及如何实施它有任何想法，那将是很棒的，因为我在从哪里开始就迷失了方向。

---

编辑

我将在固定宽度div内拥有UL，因此我可以使用溢出：未使用UL的隐藏和负值进行"人造隐藏"。

Answer 1

这是我在JSfiddle做过的一些模型，您只需要去一些非正统的解决方法即可实现这一目标。

是的，您将需要一些jQuery才能实现它，我将其悬停在示例中，您可以使用所需的事件，这只是主要的：

$('.subdropdown').hover(
    function() { $(this).parent().parent().css({'visibility': 'hidden'});
    $(this).css({'visibility': 'visible'});},
    function() { $(this).parent().parent().css({'visibility': 'visible'});}
);​

希望这会有所帮助。