CODEWITHSUNDEEP
jqueryhoverslidetoggleslidedownslideup
Dmitry
Dmitry

Reputation: 4373

jquery slideUp doesn't work on flyout menu

Here is my code http://jsfiddle.net/dmitrymar/65QHT/5/

I'm having trouble making slideUp work with css flyout menu. I got the slideDown to work although not very smoothly. I'm confused whether there's a problem with css or jquery or both. Please advise. Thanks.

Upvotes: 0

Views: 336

Answers (1)

Naveed Ahmad
Naveed Ahmad

Reputation: 3175

Okay. here is the deal:

CSS:

#miniCartWrpr .miniCartFlyout {
    display:none;
    position:absolute;
    top:15px;
    right:-2px;
    z-index:2;
    overflow:hidden;
    height:auto;
    width:300px;
    background-color:#fff;
    white-space:normal;
    text-align:left;border:solid 2px #b2b2b2;
}

Get rid of #miniCartWrpr li:hover .miniCartFlyout

then Javascript:

$(document).ready(function() {
    $('#miniCartWrpr li').hover(
    function() {
        $('.miniCartFlyout').slideDown('slow');
    }, function() {
        $('.miniCartFlyout').slideUp('slow');
    });
});

Upvotes: 1

Related Questions