jQuery的下拉動畫效果的CSS菜單UL顯示：塊問題

我想簡單的動畫添加到CSS菜單 http://jsfiddle.net/BGV2Z/2/jQuery的下拉動畫效果的CSS菜單UL顯示：塊問題

這個問題似乎是顯示：塊; 。如果您第一次懸停菜單正常工作，則在鼠標消失時，消失的菜單再次出現在最左邊位置或頂部位置（取決於等級）。

$("li").on('mouseenter', function() { 

     $(this).find('ul').first().css('display', 'none').fadeIn(500, function() { 

      $(this).css('display', 'block'); 

     }); 

    }).on('mouseleave', function() { 

     $(this).find('ul').first().fadeOut(500, function() { 

      $(this).css('display', 'none'); 

     }); 
    });

我錯過了一些明顯的任何幫助表示讚賞。謝謝！

來源

2014-02-25 Benn

添加position: relative;你的CSS爲ul.dropdown li

ul.dropdown li { 
    float: left; 
    min-height: 1px; 
    vertical-align: middle; 
    margin:0 5px; 
    display:block; 
    position: relative; 
}

來源

2014-02-25 15:15:43 SW4

很好找！比你！ – Benn

你能做到這一點，而不需要的jQuery和使用CSS3動畫:)

只需添加一些transition動畫，這裏一個例子：http://jsfiddle.net/xine/BGV2Z/13/

來源

2014-02-25 15:26:18 Patryk

還不錯，但我需要更多的動畫，並支持沒有css3支持的瀏覽器。但是，謝謝你的例子 – Benn

jQuery的下拉動畫效果的CSS菜單UL顯示：塊問題

回答

相關問題