[jQuery] Getting Superfish menus to overlap in IE
Hey,
So i spent a large portion of work on Friday trying for the life of me
to understand how to get the Superfish menus to overlap in IE. Here is
the scenario that warranted them overlapping in the first place:
The menu is horizontally across the top of the page and naturally the
last menu is about 3 menus deep so it goes off the page even on a
1280x1024 screen. So the solution is naturally going to be to have the
menus overlap some (menu width of about 16em and so we have them to
the left by only 8em for the overlap). Here was the result of hours of
research on Friday -> each subsequent li that is called in an
unordered list is going to gain a z-index greater than the one that
you are presently in (example code will follow to make this clearer).
As a result, each menu was displaying its submenu behind the
subsequent li's. Here is the sample code:
<ul>
<li>Menu item 1
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
</ul>
</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
</ul>
So "Menu item 1" through 3 would appear just fine, but if the submenu
is overlapping the original menu, in IE, Sub 2 and 3 will appear
underneath Menu item 2 and Menu item 3. The solution that I found
(which is very very hackish) was to turn the code into the following:
<ul>
<li style="z-index:10;">Menu item 1
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
</ul>
</li>
<li style="z-index:9;">Menu item 2</li>
<li style="z-index:8;">Menu item 3</li>
</ul>
The result was that the z-index of each subsequent menu item was less
than the parent to the submenu. This worked fine but I feel that it
was way way too hackish and was curious if anyone had a better
solution to this. Thanks in advance!
~Aaron