Search code examples
jqueryhoverslidetoggleslidedownslideup

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.

Solution

  • 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');
    });
});