CODEWITHSUNDEEP
jquerycssxhtmlinternet-explorer-7drop-down-menu
David Cornu
David Cornu

Reputation: 1

jQuery Drop Down Menu IE7 Problem with .slideDown

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?

Upvotes: 0

Views: 1532

Answers (2)

Lourens
Lourens

Reputation: 1518

The fix would look something like

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

IE7 doesn't like display:block

Upvotes: 1

user241244
user241244

Reputation:

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?

Upvotes: 0

Related Questions