在Chrome和Safari上，菜单淡入淡出仍处于悬浮状态

Question

I'm developing a new Joomla 2.5 website and I have to implement a fade effect on the menu for the first level of li only.

Site url: http://goo.gl/Eu9Mt

I added this effect but I have a problem on "Google Chrome" & "Safari" only. When I hover the mouse on a sub menu and move the mouse away but without hover the parent menu the fade effect still exist but when I move the mouse away and the last item I hovered was the parent item, the fade effect execute correctly.

here is my jQuery code:

(function($){
    $(document).ready(function () {
    $('#ja-mainnav ul.level0 li').not('#ja-mainnav ul.level0 li ul li').append('<div class=\'hover\'><div><\/div><\/div>');
    $('#ja-mainnav ul.level0 li').not('#ja-mainnav ul.level0 li ul li').hover(
        function() {
            $(this).children('div').stop(true, true).fadeIn('1000');
        },
        function() {
            $(this).children('div').stop(true, true).fadeOut('fast');
    }).click (function () {
        $(this).addClass('selected');
    });
});
})(jQuery);

Please advise

Answer 1

add this on your css:

#ja-mainnav li.haschild .hover {
   background-image: none;
 }

#ja-mainnav li.haschild-over.over .hover {
   background-image: url("../../images/nav/menu_over.gif");
 }

 #ja-mainnav li.haschild .hover div {
   background-image: none;
 }

 #ja-mainnav li.haschild-over .hover div {
   background-image: url("../../images/nav/menu_overspan.gif");
 }

to add a transition with pure css, you can apply this on the hover stage (for example):

 -webkit-transition: all 0.3s ease-out;  /* Safari 3.2+, Chrome */
 -moz-transition: all 0.3s ease-out;  /* Firefox 4-15 */
 -o-transition: all 0.3s ease-out;  /* Opera 10.5–12.00 */
 transition: all 0.3s ease-out;  /* Firefox 16+, Opera 12.50+ */

no IE support I'm afraid

hope this helps