Div drop down when another div is hovered over jQuery

Question

I have a div with the class nav-divs which has another div nested inside with the class drop-down. I have four of these. When one of the nav-divs is hovered over I want the drop-down div which is directly under the nav-div to slide down. How do I make sure only the drop-down div under the nav-div hovered over is sliding down with jQuery?

HTML -

<div id='container'>
    <div class='nav-divs'>Home 
        <div class='drop-down'></div>
    </div>
    <div class='nav-divs'>Products
        <div class='drop-down'></div>
    </div>
    <div class='nav-divs'>About 
        <div class='drop-down'></div>
    </div>
    <div class='nav-divs'>Contact 
        <div class='drop-down'></div>
    </div>
</div>

CSS -

#container {
    text-align: center;
    height: 30px;
    width: 100%;
    background-color: #e74c3c;
}

.nav-divs {
    background-color: #c0392b;
    height: 30px;
    width: 100px;
    display: inline-block;
    margin-left: 50px;
    line-height: 30px;
    font-family: Franklin Gothic Medium Cond;
}

.drop-down {
    height: 200px;
    width: 100px;
    background-color: #bdc3c7;
    display: none;
}     

jQuery -

$('.nav-divs').mouseover(function(){
    $('.drop-down').slideDown(500);
});

$('.nav-divs').mouseout(function(){
    $('.drop-down').slideUp(300);
});

Help would be appreciated as I am fairly new to jQuery.

Thanks!

Answer 1

change your jquery to :

$('.nav-divs').mouseover(function(){
$(this).find('.drop-down').slideDown(500)
}).mouseout(function(){
$(this).find('.drop-down').slideUp(300);
});;

extra tip: i checked your css you need to set .drop-down { position:absolute; in order to avoid other related divs to move

http://jsfiddle.net/drukaman/ubntf4u7/

Answer 2

Use find() using current element reference by using $(this) to get current element reference who fires event:

$('.nav-divs').mouseover(function(){
$(this).find('.drop-down').slideDown(500);

});

Answer 3

It is updating all the sub divs. Try to specific using find() keyword. Update your jquery like this. Also add vertical-align:top property to your inline-block elements for fixing the jumping issues.

  $('.nav-divs').mouseenter(function(){   
    $(this).find('.drop-down').slideDown(500);
  });

  $('.nav-divs').mouseout(function(){
    $(this).find('.drop-down').slideUp(300);
  });

.nav-divs {
    background-color: #c0392b;
    height: auto;
    width: 100px;
    display: inline-block;
    margin-left: 50px;
    line-height: 30px;
    font-family: Franklin Gothic Medium Cond;
    vertical-align:top;
}

Answer 4

Hope it can help you,Cheers :D

jsfiddle.net/stormspirit/7hpknkbo/

Answer 5

Extending ehsan's answer: here is the fiddle:

$('.nav-divs').mouseover(function () {
    $(this).find('.drop-down').slideDown(500);

    //$('.drop-down').slideDown(500);

});

$('.nav-divs').mouseout(function () {
    $(this).find('.drop-down').slideUp(500);
    //$('.drop-down').slideUp(300);
});

http://jsfiddle.net/learner420/rp37duth/