Question

1. I read/coded a tutorial which utilized jQuery Animations for a drop-down list.
2. The tut was relatively old (I now see), but it worked!
3. That is, it worked ONLY using the version of jQuery that was out when it was written (1.4.2) and below.
4. From jQuery version 1.4.4 and up: EPIC FAIL!!! The menus are displayed, but the drop down animations aren’t working.
5. I’ve read what I could on the jQuery site and I simply dont see what has changed.
6. But then again, I’m green. Could be staring me in the face :-}
7. I need some illumination as to why this fails on upgrade.

The working fiddle. http://jsfiddle.net/pkdsleeper/ybwmW/

The “suspect” fiddle. http://jsfiddle.net/pkdsleeper/4msLH/

thanks in advance!
sleeper

Answer 1

One problem is you turned off effects in your fiddle. Just re-enabling them doesn’t solve the problem, but you’ll have to do that to get this to work.

So first comment out this line:

// $.fx.off = true;

Next, the code is now no longer ignoring the CSS for #nav li ul.

If you change the CSS to this, it will solve the problem:

#nav li ul 
{
    /*display:none; --- Get rid of this! */
    position:absolute;
    left:0;
    top:100%;
    padding:0;
    margin:0;
}

This is safe because these are already set (via jQuery) in your initial definition for your site object.

Here’s the final fiddle: http://jsfiddle.net/4msLH/40/