css - horizontal jquery menu with subsectons -

i need help. i've looked everywhere think i'm looking little unique.

i'm trying make menu when click on menu option group of options. bit got, think. im trying achieve getting allow children of submenu slide in-between line of links directly. kind of horizontal accordion menu, twist of having top menu links in row rather vertically.

the action, click on topmenu item , submenu(s) links appear. if submenu link clicked, link appear sub-submenu items corresponding original link , hiding , parents.

im not sire if im explaining right. head little brain-dead trying solve issue day , im cave in.

this example of im trying achieve:

if want go here see have done http://jsfiddle.net/pi_mai/zuu5m/ i'm trying make menu html code ( i've remove many link items shorten code ):

    <nav>     <ul class="topmenu">         <li class="topmenu-item-1"><a href="" class="topmenu-link">top menu</a></li>         <li class="topmenu-item-2"><a href="" class="topmenu-link">top menu</a></li>     </ul>     <ul class="submenu topmenu-item-1">         <li class="submenu-item-1"><a href="" class="topmenu-link">top menu</a></li>         <li class="submenu-item-2"><a href="" class="topmenu-link">top menu</a></li>     </ul>     <ul class="subsubmenu submenu-item-1">         <li class="submenu-item-1"><a href="" class="topmenu-link">top menu</a></li>         <li class="submenu-item-2"><a href="" class="topmenu-link">top menu</a></li>     </ul>     <ul class="submenu topmenu-item-1">         <li class="submenu-item-7"><a href="" class="topmenu-link">top menu</a></li>         <li class="submenu-item-8"><a href="" class="topmenu-link">top menu</a></li>     </ul>     <ul class="submenu topmenu-item-2">         <li class="submenu-item-1"><a href="" class="topmenu-link">top menu</a></li>         <li class="submenu-item-2"><a href="" class="topmenu-link">top menu</a></li>     </ul>     <ul class="submenu topmenu-item-3">         <li class="submenu-item-1"><a href="" class="topmenu-link">top menu</a></li>         <li class="submenu-item-2"><a href="" class="topmenu-link">top menu</a></li>     </ul>     </nav> 

.

$('.topmenu > li').on('click',function(){         var itemclass = $(this).attr('class');         console.log(itemclass)         $('.submenu').not(this).removeclass('toggle');         $('.submenu.' + itemclass ).toggleclass('toggle');         $('.subsubmenu.toggle').siblings().removeclass('toggle')     });     $('.submenu > li').on('click',function(){         var itemclass = $(this).attr('class');         console.log(itemclass)         $('.subsubmenu').not(this).removeclass('toggle');         $('.subsubmenu.' + itemclass ).toggleclass('toggle');     }); 

can me?

edit

i think have solution, need add animation it's working overall , me fantastic!

function menutap( $this ){      var thisclass = $this.attr('class');      if( $this.parent().hasclass("top-menu") ){         $('.sub-menu.' + thisclass ).animate().toggleclass('hide');         $('.sub-menu' + ':not(.' + thisclass + '), .sub-sub-menu' ).addclass('hide');     };      if( $this.parent().hasclass("sub-menu") ){         console.log( $this.attr('class') + ' li clicked')         $('.sub-sub-menu.' + thisclass ).toggleclass('hide');         $('.sub-sub-menu' + ':not(.' + thisclass + ')' ).addclass('hide');     };  }  $('.top-menu li, .sub-menu li').on('click',function(){     menutap( $(this) ); }); 

one major hurdle html structure. menus have this, submenus nested inside parents:

<ul class="topmenu">   <li><a></a>     <ul class="submenu">...</ul>   </li> </ul> 

whereas have this, submenus siblings of parents:

<ul class="topmenu">   ... </ul>  <ul class="submenu">   ... </ul> 

it's simpler call elements based on parent-child relationship classes or sibling relationships.

here's start. i'm out of time now. http://jsfiddle.net/isherwood/zuu5m/1/