Question

I want to make drop-down menu with jquery (here’s 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:

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; }

Problem is when I hover one of the parent button everyone parrent button expands. What should I change in my code?

Answer 1

I think You have a very complicated code. It should be like this

$(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();
        }
    );

});