复杂嵌套UL导航

Question

我试图把一个三级UL变成一个易于使用的导航系统。

我的想法是有第一个UL，这是李的表现，但隐藏UL UL和UL UL，以及他们各自的李。

我希望有人能够点击上面的安莉，然后显示UL在那个李。

这样的想法是，父UL隐藏，它是李的，但不是我刚刚选择的子UL。

如果另一个李被点击，它显示了李的孩子UL和它各自的李。

其效果将仅仅是一个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'});}
);​

希望这能有所帮助。