Question

Hey guys this is my html code:

<div class="nakupy">
     <li class="icn_kategorie"><a href="#">Nákupy</a>
        <div class="sub_menu">
            <sub_menu class="icn_kategorie"><a href="#">TESCO</a></sub_menu>
            <sub_menu class="icn_kategorie"><a href="#">Potraviny</a></sub_menu>
            <sub_menu class="icn_kategorie"><a href="#">Drogéria</a></sub_menu>
            <sub_menu class="icn_kategorie"><a href="#">Oblecenie</a></sub_menu>
        </div>
    </li>
</div>

<div class="domacnost">
    <li class="icn_kategorie"><a href="#">Domácnost</a>
        <div class="sub_menu">
            <sub_menu class="icn_kategorie"><a href="#">TESCO</a></sub_menu>
            <sub_menu class="icn_kategorie"><a href="#">Potraviny</a></sub_menu>
            <sub_menu class="icn_kategorie"><a href="#">Drogéria</a></sub_menu>
             <sub_menu class="icn_kategorie"><a href="#">Oblecenie</a></sub_menu>
        </div>
    </li>
</div>

And by jQuery I want to select only class=”nakupy” and slideDown class=”sub_menu” in that class “nakupy”. I used this script but did not work for me:

$(".nakupy").mouseover(function(){
     $(".sub_menu").parent(".nakupy").slideDown('slow');
});

Instead of sliding down only class “nakupy” and “sub_menu” it slides down both classes “nakupy”,”domacnost” and class “sub_menu” in both.

How do I make it slide in only one class?

Answer 1

Maybe change:

$(".nakupy").mouseover(function(){ 
   $(".sub_menu").parent(".nakupy").slideDown('slow'); 
 });

for:

$(".nakupy").mouseover(function(){ 
   $(this).find(".sub_menu").slideDown('slow'); 
 });