Javascript 单击“粘贴第二级导航”

我有两级导航。如果我点击第二级，它不应该隐藏，而是坚持在那里。在悬停时，第二层显示正确，现在我想要的是，我点击sub 2并将光标移出，sub 2应该被选中并保持在那里

$（文档）.ready（函数（）{
var$nav=$（'top#u navigation>ul>li'）；
$nav.hover(
函数（）{
$（'ul'，this）.stop（true，true.slideDown（'fast'）；
$（'a'，this.first（）.css（{“背景色”：“#ccc”，“颜色”：“#000”}）；
},
函数（）{
$（'ul'，this.slideUp（'fast'）；
$（'a'，this.first（）.css（{“背景色”：“#ccc”，“颜色”：“#000”}）；
}
);
});

#顶部导航{
宽度：1248px；
保证金：0自动；
位置：相对位置；
文本转换：大写；
字体系列：“圆形字体”，无衬线；
字体大小：13px；
}
#顶级导航{
显示：无；
}
#顶级导航{
左侧填充：0；
}
#托普·李{
保证金：0；
填充：0；
浮动：左；
宽度：100px；
高度：30px；
线高：30px；
字体大小：13px；
列表样式：无；
}
#顶级导航系统{
显示：块；
文本对齐：居中；
文字装饰：无；
颜色：#000；
背景色：#FFF；
}
#顶部导航ul li.所选菜单项a{
背景色：#ccc；
颜色：#FFF；
}
#顶部导航ul li a：悬停{
背景色：#ccc；
颜色：#FFF；
}
#李莉{
高度：30px；
线高：30px；
边框顶部：#ccc 1px实心；
}

试试这个：

    $(document).ready(function () {
    var $nav = $('#top_navigation > ul > li');
    $nav.hover(
        function() {
            $('ul', this).stop(true, true).slideDown('fast');

            $('a',this).first().css({"background-color":"#ccc", "color":"#000"});
        },
        function() {
           if( ! $('ul', this).children().hasClass('show')) {
               $('ul', this).slideUp('fast');
           } else {
              $('#top_navigation ul').click(function(){
                $('ul.submenu').slideUp();
              })
           }
           $('a',this).first().css({"background-color":"#ccc", "color":"#000"});
        }
    );

    $('ul.submenu li').click(function(){
      $('ul.submenu li').removeClass('selected_menu_item')
        $(this).addClass('selected_menu_item show')
    });


});

工作小提琴：

$（文档）.ready（函数（）{
var$nav=$（'top#u navigation>ul>li'）；
var$nav1=$（“#顶部导航>ul>li>ul>li”）；
$nav.hover(
函数（）{
$（'ul'，this）.stop（true，true.slideDown（'fast'）；
$（'a'，this.first（）.css（{“背景色”：“#ccc”，“颜色”：“#000”}）；
},
函数（）{
$（'ul'，this.slideUp（'fast'）；
$（'a'，this.first（）.css（{“背景色”：“#ccc”，“颜色”：“#000”}）；
}
);
$nav1.单击（函数（）{
$（this）.addClass（“选定的菜单项”）；
}
);
});

#顶部导航{
宽度：1248px；
保证金：0自动；
位置：相对位置；
文本转换：大写；
字体系列：“圆形字体”，无衬线；
字体大小：13px；
}
#顶级导航{
显示：无；
}
#顶级导航{
左侧填充：0；
}
#托普·李{
保证金：0；
填充：0；
浮动：左；
宽度：100px；
高度：30px；
线高：30px；
字体大小：13px；
列表样式：无；
}
#顶级导航系统{
显示：块；
文本对齐：居中；
文字装饰：无；
颜色：#000；
背景色：#FFF；
}
#顶部导航ul li.所选菜单项a{
背景色：#ccc；
颜色：#FFF；
}
#顶部导航ul li a：悬停{
背景色：#ccc；
颜色：#FFF；
}
#李莉{
高度：30px；
线高：30px；
边框顶部：#ccc 1px实心；
}

单击“将类添加到子元素”并悬停“如果存在类，请勿滑动”即可。但是，如果我单击sub2并移出光标，则第二级导航不应隐藏。仅当我单击导航级别1时，它才应隐藏是非常接近，现在如果我单击第一个级别，则第二个级别应隐藏。当我单击第二个级别时，第二个级别不应隐藏。它应该只隐藏，如果我点击第一级。问题是当我移出光标时，第二级消失了