html - 如何在 CSS 中显示/隐藏 3 级菜单导航？

Question

我有这个html：

<ul>
  <li class="current"> level 1 </a>
    <ul>
      <li><a class="children">level 2</a>
        <ul>
          <li><a> level 3 </a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

如何使用 css display none/block 创建一个简单的显示/隐藏？

目前正在这样做，但只能让我进入第二级，我在逻辑上有点卡住：

ul ul,
ul ul ul {
   display: none;
}

.current .children {
   display: block;
}

Answer 1

很简单，到处都有几十个例子。稍微搜索一下可能会有所帮助。

ul ul {
    display: none;
}

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

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

Answer 2

如果你想使用 jQuery，你可以查看http://api.jquery.com/toggle/

$('#yourlinkID').click(function() {
     $('#yourbodyID').toggle()
});

上面的代码在单击带有#yourlinkID 的元素时切换带有#yourbodyID 的元素的可见性。

希望这可以帮助 ：）