Многоуровневое горизонтальное меню CSS

Question

Мне нужно создать горизонтальное меню, которое охватывает 3 уровня глубины (верхний Nav, Sub Nav, SubSub Nav).

Я нашел примеры, такие как этот CodePen, который охватывает 2 уровня, но я недостаточно силен в JQuery, чтобы сделать работу третьего уровня.

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

Лучшие Nav, и к югу от Nav могут быть видны в любое время, однако, SubSub Nav должен быть виден, если Sub нав нажата только.

У меня есть еще один открытый вопрос относительно работы моего существующего кода, который будет совместим с JQuery 1.8.2, но если это не так, я бы хотел, чтобы это можно было сделать в чистом CSS. Вот код для моего текущего меню JsFiddle.

Есть ли у кого-нибудь пример многоуровневой системы меню, в которой нет выпадающего списка? Существенное, что я пытаюсь сделать, это показать активность пользователей на веб-сайте, поэтому это скорее визуальная помощь, чем меню, но при необходимости она будет доступна для навигации по предыдущим разделам.

Answer 1

вот ссылка на чистую ссылку css, вы можете попробовать! http://www.cssscript.com/create-a-multi-level-drop-down-menu-with-pure-css/