多级水平菜单 CSS答案

【问题标题】：Multi-Level Horizontal Menu CSS多级水平菜单 CSS
【发布时间】：2017-01-18 03:01:34
【问题描述】：

我需要创建一个横向菜单，它跨越 3 个级别（Top Nav、Sub Nav、SubSub Nav）。

我找到了示例，例如跨越 2 个级别的 CodePen，但我在 Jquery 中的能力不足以使第三级工作。

$(function() {
$('li a').click(function(e) {
    e.preventDefault();
    var $this = $(this);
    $this.closest('ul').children('li').removeClass('active');
    $this.parent().addClass('active');
    });
});

Top Nav 和 Sub Nav 可以随时可见，但是，SubSub Nav 只有在单击 Sub nav 时才可见。

我还有一个关于使现有代码与 JQuery 1.8.2 兼容的未解决问题，但如果不是这样，我希望能够在纯 CSS 中做到这一点。这是我当前菜单的代码JsFiddle。

有没有人提供不涉及下拉菜单的多级菜单系统示例？我想要做的是在网站上显示用户的活动进度，因此它更像是一种视觉辅助而不是菜单，但如果需要，它可以点击导航到前面的部分。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

这里是纯css链接，你可以试试！ http://www.cssscript.com/create-a-multi-level-drop-down-menu-with-pure-css/

【讨论】：

不幸的是，我不能使用“下拉”方法。我需要所有三个可见级别（或至少顶部导航和子导航）。在单击其中一个子导航之前，可以隐藏 SubSub。