Странное выпадающее меню jQuery

Question

Я разработал этот сайт: http://loloey.com/forme/formeeng.html У меня очень странная проблема с выпадающим меню в верхнем левом углу страницы под названием «Изменить юниверс»: когда я наводил много раз на это выпадающее меню, выпадающие элементы исчезает !!! Проблема сохраняются на всех браузерах, таких как Firefox, Explorer 9, хром и т.д. и т.п.

я создал это меню с помощью простого кода JQuery:

$(document).ready(function() {  
$('#nav li').hover(
    function() { 
     //show its submenu 
     $('ul', this).stop().slideDown(100); 
    }, 
    function() { 
     //hide its submenu 
     $('ul', this).stop().slideUp(100);      
    } 
); 

}); 

Это CSS:

/*---- CROSS BROWSER DROPDOWN MENU ----*/ 

#nav { 

padding-left: 90px; 
margin-top:-15px; 
list-style: none; 
float: left; 
font-family: 'helveticaneuelight', Arial, sans-serif; 
font-size: 9px; 
color: #fff; 
} 

    /* make the LI display inline */ 
    /* it's position relative so that position absolute */ 
    /* can be used in submenu */ 
    #nav li { 
     float:left; 
     display:block; 
     width:70px; 
     background:#808184; 
     position:relative; 
     z-index:500; 
     margin:0 1px; 
    } 

    /* this is the parent menu */ 
    #nav li a { 
display: block; 
padding: 5px 5px 4px 1px; 
height: 11px; 
text-decoration: none; 
color: #58595B; 
text-align: left; 
    } 

    #nav li a:hover { 
     color:#fff; 
    } 

    /* you can make a different style for default selected value */ 
    #nav a.selected { 
     color:#f00; 
    } 

    /* submenu, it's hidden by default */ 
    #nav ul { 
     position:absolute; 
     left:0; 
     display:none; 
     margin:0 0 0 -1px; 
     padding:0; 
     list-style:none; 
    } 

    #nav ul li { 
     width:70px; 
     float:left; 
    } 

    /* display block will make the link fill the whole area of LI */ 
    #nav ul a { 
display: block; 
height: 15px; 
padding: 4px 5px; 
color: #58595B; 
    } 

    #nav ul a:hover { 
     text-decoration:none; 
    } 

    /* fix ie6 small issue */ 
    /* we should always avoid using hack like this */ 
    /* should put it into separate file :) */ 
    *html #nav ul { 
     margin:0 0 0 -2px; 
    } 

И это HTML:

<div id="cambia"> 
    <div class="top_a">CHANGE UNIVERSE:</div> 
    <ul id="nav"> 


<li><a href="#">FORME</a> 
    <ul> 
    <li><a href="../grandfloor/grandflooreng.html">GRANDFLOOR</a></li> 
    <li><a href="../gdo/gdoeng.html">GDO</a></li> 
    <li><a href="../parsi/parsieng.html">PARSI</a></li> 
    </ul>   
    <div class="clear"></div> 
</li> 
    </ul> 
</div> 

Любой, кто мне помочь?

Answer 1

stop(true,true) попробовать с

Если параметр clearQueue снабжен значением истинно, то остальные анимации в очереди удаляются и никогда не закончатся.

$(this).stop(true,true).slideDown(100); 

Answer 2

Вы можете попробовать быть ниже взламывать

Вот рабочая демонстрация: http://jsfiddle.net/QM73r/

...

$(document).ready(function() { 

    $('#nav li').hover(
     function() { 
      //show its submenu 
      $('ul', this).stop().slideDown(100); 

     }, 
     function() { 
      //hide its submenu 
      $('ul').attr('style', 'display:block'); 
      $('ul', this).stop().slideUp(100); 

     } 
    );