CODEWITHSUNDEEP
javascriptjqueryhtmlcssdrop-down-menu
Isaac Ennor
Isaac Ennor

Reputation: 3

Drop Down Div Stay Visible on Hover jQuery

I have a drop down div (.drop-down) that has a display none but slides down on another div (.nav-divs) hover. I want to be able to have .drop-down stay visible when I hover over it but currently it flickers terribly on hover. Im sure there is a really simple solution but I am fairly new to jQuery. Help would be greatly appreciated.

Here is a fiddle

Thanks!

HTML - 

<div id='container'>
<a href=''><div class='nav-divs'>Home

</div></a>
<a href=''><div class='nav-divs'>Products
<div class='drop-down'><ul class="product-list">
    <a href=""><li>Phones</li></a>
    <a href=""><li>Computers</li></a>
    <a href=""><li>Software</li></a>
    <a href=""><li>Hardware</li></a>
</ul></div>
</div></a>
<a href=''><div class='nav-divs'>About

</div></a>
<a href=''><div class='nav-divs'>Contact

</div></a>

CSS -

#container {
        text-align: center;
        height: 30px;
        width: 100%;
        background-color: #2B2B2B;
        position: fixed;

    }

    .nav-divs {
        background-color: #2B2B2B;
        height: 30px;
        width: 100px;
        display: inline-block;
        margin-left: 50px;
        line-height: 30px;
        font-family: Franklin Gothic Medium Cond, Futura BdCn BT, helvitica, arial, sans-serif;
            color: white;
            vertical-align:top;


    }

    .drop-down {
        height: 150px;
        width: 100px;
        background-color: #474747;
        display: none;
        position: absolute;
        text-align: center;

    }   

    .drop-down ul li {
        list-style-type: none;

jQuery - 

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

});

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

});

Thanks Again!

Upvotes: 0

Views: 1457

Answers (2)

Hayo Friese
Hayo Friese

Reputation: 83

for this you don't necessarily need javascript. you can also utilize the class display:none and class:hover display:block/inline-block, etc. using CSS. you can then incorporate webkit-transition and stuff to smooth it out.

Upvotes: 0

Andrei &#39;finelord&#39; Baibakou
Andrei &#39;finelord&#39; Baibakou

Reputation: 575

Use mouseenter and mouseleave jQuery events:

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

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

jsfiddle demo

Upvotes: 1

Related Questions