jQuery Drop Down Menu IE7 Problem with .slideDown

Question

I have the following jquery on mcgillidssa.com to animate the drop down menu:

$(document).ready(function() { 
 $("#navigation ul li").hover(function() {
  $(this).addClass("over");
  $(this).find("ul").slideDown('fast').show();
  $(this).hover(function() {
  }, function(){
   $(this).removeClass("over");
   $(this).find("ul").slideUp('fast');
  });
 });
}); 

The code is supposed to show the "ul li ul" when the .hover action is called. This works absolutely fine in Firefox, Safari, Chrome and IE8, but fails to appear in IE7. I thought the problem was a z-index issue but that was not the case. Here's the CSS for reference:

http://www.mcgillidssa.com/wp-content/themes/midssa/style.css

Any thoughts as to how this can be fixed?

Answer 1

Not sure if maybe IE is misinterprething a this....but this can help clarify your code in general. Set your $(this) to a var.

var lItem = $(this); //list item

Substitute lItem for $(this) where $(this) is #navigation ul li.

Relatedly, is it perhaps the second hover event going on in that hover event?

Answer 2

The fix would look something like

$("ul").slideDown(function(){ $(this).css('display', 'inline-block') });

IE7 doesn't like display:block