Question

I have a drop down that I’d like to have fade in opacity upon parent being hovered. I’m using display:none, so I’m not sure if this affects things… I know it does for CSS3 transitions.

  <ul class="headermenu">
                <li><a href="index.php">Index</a></li>
                <li class="topmenu"><a href="#">Parent</a>
                    <div class="submenu">
                        <ul class="sub">
                            <li><a href="#">Drop down 1</a></li>
                            <li><a href="#">Drop down 2</a></li>
                            <li><a href="#">Drop down 3</a></li>
                            <li><a href="#">Drop down 4</a></li>
                        </ul>
                    </div>                  
                </li>
                <li><a href="#">Irrelevant</a></li>
                <li><a href="#">Irrelevant</a></li>
            </ul>

My CSS for parent/child :

.submenu { 
    display:none;
    visibility:hidden;
    opacity:0.0;
}


.topmenu:hover .submenu {
    display:block;
    position:absolute;
    float:left;
    top:25px;
    left:-20px;
    margin:0px;
    padding:10px 10px;
    width:360px;
    height:35px;
    background:none;
    visibility:visible;
    opacity:1.0;

 }

My poor, poor failing JQUERY :

$(document).ready(function() {
    $('.topmenu').each(function() {
        $('.topmenu').hover(function() {
            $('.submenu').stop().animate({ opacity:1.0 }, 700);
        },
       function() {
           $('.submenu').stop().animate({ opacity:0.0 }, 600);
       });
    });
});

Oddly enough, it animates opacity on the 2nd time I hover, but not on hovering out, and I’m sure there’s a better way to accomplish this, I’m just not sure what. Perhaps some of my CSS rules are overwriting my JQuery….

Many thanks SO.

Answer 1

Yea you can way simplify this:

JQuery:

$(function(){
    $('.topmenu').hover(function(){
        $(this).children('.submenu').stop().fadeIn(700);
    },function(){
        $(this).children('.submenu').stop().fadeOut(600);
    });
});

CSS:

.topmenu {
    position:relative;
}

.submenu {
    display:none;
    position:absolute;
    top:10px;
    left:20px;
    margin:0;
    padding:10px;
    width:360px;
    background-color:#F0F0F0;
 }

Demo: http://jsfiddle.net/shTyp/