CODEWITHSUNDEEP
cssinternet-explorer-7z-indexcss-spritessuperfish
shin
shin

Reputation: 32721

Z-index problem in IE7 with jQuery Superfish menu plugin

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.

Upvotes: 6

Views: 12537

Answers (3)

webPragmatist
webPragmatist

Reputation: 11

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);

Upvotes: 1

Sylar
Sylar

Reputation: 191

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.

Upvotes: 19

Emily
Emily

Reputation: 10088

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.

Upvotes: 6

Related Questions