javascript: Как создать многоуровневое меню, горизонтальное с выпадающими пунктами?

Когда то на одном проекте, второпях написал код для очень запутанной многоуровневой навигации с кучей подменю.

Конкретно этот кусок отвечал за отображение следующего уровня меню с содержанием соответствующим нажатой кнопке. То есть при нажатии на кнопку с одним из классов [".1st", ".2nd", ".3rd"], элемент в другом блоке, например div.1st_list получает класс .active, но если .2nd уже .2nd.active, то сначала у .2nd.active удаляется .active и уже потом div.1st_list получает .active. То есть одновременно активным может быть только один элемент.

       $(function() {
   Sub_menus = [".1st", ".2nd", ".3rd"]

   for (var i = 0; i < Sub_menus.length; i++) {
       (function(sub_item) {
           $("." + sub_item + "_item").click(function() {
              if ($("." + sub_item + "_list.active")[0]) {
                   $(".gne_snd .dynamic_inner>div").removeClass("active");
                   $(".gne_snd").removeClass("active");
                   $(this).removeClass("for_anim");
               } else if ($(".gne_snd.active")[0]) {
                   $(".gne_snd .dynamic_inner>div").removeClass("active");
                   $("." + sub_item + "_list").toggleClass("active");
               } else {
                   $(".gne_snd").toggleClass("active");
                   $("." + sub_item + "_list").toggleClass("active");
               }
           });
       })(Sub_menus[i]);
   }});

Поскольку и JS, и jQuery знаю очень поверхностно, написал как мог.

И собственно, что хочу узнать.
Есть ли более элегантные, может быть эффективные, решения для подобных задач? Как еще можно написать код для такой задачи?