多级水平菜单CSS

Question

I need to create a Horizontal Menu, which spans 3 levels deep (Top Nav, Sub Nav, SubSub Nav).

I have found examples, such as this CodePen that spans 2 levels, but I'm not strong enough in Jquery to make the third level work.

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

The Top Nav, and Sub Nav can be visible at all times, however, the SubSub Nav only needs to be visible if the Sub nav is clicked.

I have another open question regarding working my existing code to be compatible with JQuery 1.8.2, but if that's not the case, I would love to be able to do this in pure CSS. Here is the code to my current menu JsFiddle .

Does anyone have an example of a multi-level menu system that doesn't involve a dropdown? Essential what I'm trying to do is display the users active progress on a website, so it's more a visual aid than a menu, but it will be clickable to navigation to previous sections, if needed.

Answer 1

here is the link for pure css link, you can try out! http://www.cssscript.com/create-a-multi-level-drop-down-menu-with-pure-css/