jQuery hoverintent создание и удаление элемента

Question

У меня есть сценарий, который анимирует мое меню ul element при наведении. Он также создает фоновый элемент для ul. Я сделал этот сценарий:

jQuery(document).ready(function($) { 

    $(".main-navigation ul:first > li").hoverIntent({ 
     sensitivity: 1, 
    interval: 100, 
    timeout: 400, 
    over: function() { 
     if ($(this).children().length > 1) { 
     $(this).parent().prepend('<div class="sub-nav" style="position: absolute; top: 0px; left: 250px; display: block; opacity: 1;"></div>'); 
       $(this).children("ul").css({ 
      "display" : "block", 
      "left" : "250px", 
      }).stop().animate({ 
       top: '-50px', 
       opacity: 1, 
       }, 500) 
       }}, 
    out: function() { 
    $(".sub-nav").remove(); 
    $(this).children("ul").stop().animate({ 
       "top" : "-500px", 
       "opacity": 0, 
        }, 500).css({ 
        "display" : "none", 
        }) 

      } 
     }) 
    }); 

Он работает нормально, но проблема возникает, когда я выбираю другое меню, которое находится ниже этого. Итак, у меня есть два меню с подменю. Если я выбираю separetly, каждый из них работает нормально, но если я выбираю первый, а затем перехожу на другой, фоновые элементы (.sub-nav) не отображаются.

Что мне не хватает?

JS FIDDLE: http://jsfiddle.net/r8vx07ae/10/ (попытайтесь переместить курсор из пункта меню # 2 в меню пункт № 3)

Answer 1

Я не уверен, если это правильный способ сделать это, но вмешиваются вокруг I своего рода достиг чего я хотел. Я сделал следующее:

jQuery(document).ready(function($) { 

    $(".main-navigation ul:first li").hoverIntent({ 
     sensitivity: 1, 
    interval: 100, 
    timeout: 400, 
    over: function() { 
     if ($(this).children().length > 1) { 
     $(this).parent().prepend('<div class="sub-nav" style="position: absolute; top: 0px; left: 250px; display: block; opacity: 1;"></div>'); 
       $(this).children("ul").css({ 
      "display" : "block", 
      "left" : "250px", 
      }).animate({ 
       top: '-50px', 
       opacity: 1, 
       }, 500) 
       }} 
     }) 

     .mouseleave(function() { 
     $(".sub-nav").remove() 
     $(this).children("ul").stop().animate({ 
       "top" : "-500px", 
       "opacity": 0, 
        }, 500).css({ 
        "display" : "none", 
        }) 

      }) 
    }); 

Это решило мою проблему. Он работает так, как я хотел.

JS Fiddle также обновляется: http://jsfiddle.net/r8vx07ae/11/

Прежде чем выбрать ответ, который я хотел бы ждать, пока кто-нибудь, возможно, обновить его с более более чистым раствором.