jQueryドロップダウンメニューの問題

Question

jquery（ここではthe according jsFiddle）を使用してドロップダウンメニューを作成します。

HTML：

<ul id="mainmenu"> 
    <li><a href="http://myszki/">Aktualności</a></li> 
    <li class="parent item13"><a href="/start.html">Galerie</a> 
    <ul> 
     <li><a href="/start/plenery.html">Plenery</a></li> 
    </ul> 
    </li> 
    <li class="parent"><a href="/start.html">Galerie</a> 
    <ul> 
     <li><a href="/start/plenery.html">Plenery</a></li> 
    </ul> 
    </li> 
</ul> 

JS：

$(document).ready(function() 
{ 
    var sub = 'ul#mainmenu li.parent ul'; 
    var parents = 'ul#mainmenu li.parent'; 
    var count = 0; 

    $(sub+", "+parents).mouseenter(
    function() 
    {   
     $(this).children('ul').addClass('submenu'); 

     var width = $(parents).width(); 


     count++; 
     $(sub).find('a').css({'width':width}); //ustawienie parametrow wyswietlana 

     if ($(sub).is(':visible')) 
      { 
       $(sub).stop(true, true).show(); //pokaz 
      } 
     else 
      { 
       $(this).find('ul.submenu').stop(true, true).delay(800).slideDown('fast'); 
      } 

    }).mouseleave(
     function() 
     { 
      count--; 

      if (!count) 
       {      
        $(sub).stop(true, true).slideUp('fast'); 

       } 
     }); 

}); 

CSS：私は親ボタンみんなのparrentボタンの1拡大置くと

ul#mainmenu { 
    width: 990px; height: 35px;  
    background:#000; 
    clear: both; 




} 
ul#mainmenu li {float:left; position: relative; } 
ul#mainmenu li a { 
    color: #FFFFFF; 
    font-size: 14px; 
    font-weight: bold; 
    text-decoration: none; 
    text-transform: uppercase;  
    line-height: 35px; padding: 0 19px 0 20px; 
    display: block; 

    z-index: 150; 
    position: relative; 




} 
ul#mainmenu li.backLava {background: url(../images/arrow_menu.png) no-repeat center bottom #202223; z-index: 20;} 
ul#mainmenu li span {background: url(../images/star.png) left no-repeat; padding-left: 15px; z-index:50;} 





ul#mainmenu li.parent ul {display: none; position: absolute; top:35px; } 
ul#mainmenu li.parent ul li {border-bottom:1px solid darkgrey; border-left:1px solid darkgrey; border-right:1px solid darkgrey;} 
ul#mainmenu li.parent ul span {background: none; padding-left: 4px;} 
ul#mainmenu li.parent ul li a {text-decoration: none; background:#eeeeee; color: #000; font-size: 12px; line-height: 25px; display: block; padding: 0px; text-transform: none; opacity:0.8;filter:alpha(opacity=80); font-weight: normal; } 
ul#mainmenu li.parent ul li.hover a { color: #000; } 

問題があります。コードで何を変更すればよいですか？

Answer 1

あなたは非常に複雑なコードを持っていると思います。このようにする必要があります

$(document).ready(function() { 

    $('#mainmenu > li').hover(
     function() { 
      $(this).find('ul').stop(true, true).addClass('submenu').slideDown(); 
     }, 
     function() { 
      $(this).find('ul').stop(true, true).removeClass('submenu').slideUp(); 
     } 
    ); 

}); 

Answer 2

if($(sub).is(':visible'))のポイントは何ですか？

http://jsfiddle.net/gf4xj/4/