Drop down horrizontal navi with jQuery

Question

I´ve got a special navigation and the structure may not be the best but i cant change it very much. This is a 3 level navigation.

For example: You click on an level_1 nav item and the child level_2 and level_3 navigation appears.

HTML

<div id="nav">
<nav class="mod_navigation block">
<ul class="level_1">
<li class="submenu sibling first selected">
<a class="submenu sibling first" href="#" title="">Lorem</a>
<ul class="level_2" style="display: block;">
<li class="submenu first">
<a class="submenu first" href="" title="">Lorem ipsum dolor sit amet</a>
<ul class="level_3">
<li class="first">
<li>
<li>
<li>
<li>
<li>
<li>
</ul>
</li>
<li class="submenu">
<li class="submenu last">
</ul>
</li>
<li class="submenu sibling">
</ul>
</nav>
</div>

But my js code only slides the content and not the background (css hover effect) item (.nav). Can you help me with my code?

JS Code

var $topLevelItems = $("nav > ul > li");

    $topLevelItems.click(function() {
        if (!$(this).hasClass('selected')) {
            $topLevelItems.removeClass('selected')
                .find('.level_2')
                .slideUp();

            $(this).addClass('selected')
                .find('.level_2')
                .slideDown();
        }
    });

Fiddle

http://jsfiddle.net/DvG6H/2/embedded/result/

Answer 1

Please see the script; this will help you,

var $topLevelItems = $("nav > ul > li");


$('#nav').hover(function(){
    if($('.level_2:visible').length>0){
     $('.mod_navigation').animate({height:320},200);
    }
},function(){
    $('.mod_navigation').animate({height:50},200);
});

    $topLevelItems.click(function() {
        if (!$(this).hasClass('selected')) {
            $topLevelItems.removeClass('selected')
                .find('.level_2')
                .slideUp();
             $('.mod_navigation').animate({height:320},200);
            $(this).addClass('selected')
                .find('.level_2')
                .slideDown();

        }
    }); 

Here is the demo

Please try this one too, This will handle the click function

var $topLevelItems = $("nav > ul > li");
    $topLevelItems.click(function() {
        if (!$(this).hasClass('selected')) {
            $topLevelItems.removeClass('selected')
                .find('.level_2')
            .slideUp('slow');

            $(this).addClass('selected')
                .find('.level_2')
            .slideDown('slow',function(){
             $('.mod_navigation').animate({height:$topLevelItems.find('.level_2:visible').height()+55},200);
            });                       
        }
    });

Answer 2

from #nav .level_2

#nav .level_2 {
display: none;
margin-top: 50px;
position: absolute;
}

edit the display to block:

as this:

#nav .level_2 {
display: block;
margin-top: 50px;
position: absolute;
}