Z-index problem in IE7 with jQuery Superfish menu

Question

I needed to modify jQuery Superfish menu plugin to accommodate using image for the menu.

There are submenus under Om oss and Medieomtale. I used sprites images for this menu.

It works fine with IE8, FF etc. However IE7 has a problem to show submenus. It shows the submenu but when I try to navigate in the submenu, it fades out.

Editor's note

A link in this question to www.okadadesign.no to demonstrate the issue was removed, as it is no longer accessible.

Answer 1

It also might be something as stupid as not specifying a "background" on .sf_menu li ul. I was using a gradient (filter in IE) and didn't specify the original background color.

  background: #F3F3F3; /* required for IE to retain hover state */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F3F3F3', endColorstr='#D8D8D8');
  background: -webkit-gradient(linear, left top, left bottom, from(#F3F3F3), to(#D8D8D8));
  background: -moz-linear-gradient(top,  #F3F3F3,  #D8D8D8);

Answer 2

I've always had to put a z-index on .sf-menu li li to get the sub-menus to show up in ie6/7.

Using hoverIntent might help too. There are details about on the superfish page.

Answer 3

I fixed the z-index problem for IE7 and IE6 by adding: position: relative; and z-index:10000; to the main #nav div that contains the (sf-menu) and the job was done.