Search code examples
jquerydrop-down-menuslidetoggle

Jquery SlideToggle dropdown doesn't work in IE

I've made a website based on WordPress and I've build a dropdown menu using jQuery's SlideToggle function. This works fine in Firefox, but in IE it doesn't and I absolutely have no idea why. I tried to remove some position: absolute, since there seems to be issues with that, but without success.

I uploaded a test version here

I am completely stuck with this so any help would be greatly appreciated.

The jQuery (the change to the expanded class is to change the plus icon to the minus icon:)

$('#menu-item-88').click(function () {
   $(this).find('ul.sub-menu').slideToggle();
});

$('#menu-item-89').click(function (event) {
   $(this).find('ul.sub-menu').slideToggle();
   event.stopPropagation();

   if ($(this).hasClass('menu-item-89')){
      $(this).addClass('expanded').removeClass('menu-item-89');
   } else {
      $(this).addClass('menu-item-89').removeClass('expanded');
   }

});

$('#menu-item-90').click(function (event) {
   $(this).find('ul.sub-menu').slideToggle();

   event.stopPropagation();

   if ($(this).hasClass('menu-item-90')) {
      $(this).addClass('expanded').removeClass('menu-item-90');
   } else {
      $(this).addClass('menu-item-90').removeClass('expanded');
   }

});
Solution

  • The problem is here:

    #header {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ccf9f8fa, endColorstr=#ccf9f8fa)
}

    it prevents visibility of the overflowed content. It seems that you have to delete it.