jquery flyout menu: make parent li stays same color when cursor moves to its sibling

I have this flyout menu in which the开发者_开发问答 "2nd level menu 3" is a flyout. The menu is generated by the CMS system so there is restriction to adding new classes directly to a specific menu item.

By default, the 1st level menu has a "top-level" class for anchor tag while 2nd and 3rd level don't have. What I want to achieve is to target the "top-level" to find the "2nd level menu 3" to add a "current" class, so that when flyout menu expanded, and cursor moves to the third level, the "2nd level menu 3" has the same white background color as the hover does.

The code is jQuery('#nav ul').find('> a.level-top').parent('li').addClass('current')}); but it's not working and I simply can't wrap my head to finding what I did wrong.

 $(document).ready(function(){
    $("#nav li li").hover(function(){
        $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
        },function(){
        $(this).find('ul:first').css({visibility: "hidden"});
        });
    });
  $(document).ready(function(){
      jQuery('#nav ul').find('> a.level-top').parent('li').addClass('current')});

---

get rid of your parent selector '>' in the find function.

I'd approach it more like

$('>li>ul>li').parent('ul>li').hover(function(){
    $(this).css(backgroundColor: 'red'

but before you do that buddy, your list code is mega messed. don't forget to close you list items, and if you're using a CMS that auto-generates this code then try something else :)