Superfish dropdown menu not showing up in IE6

Question

Hey guys,

just got into this problem with jQuery superfish menu - the dropdown menu is not showing up at all in IE6.

From my understanding IE6 has a problem with z-index and probably my menu is hidden under the .middle div.

Tried out the solutions suggested by this guy: http://nhaskins.com/post/ie-js-menus-hide-behind-jquery-slide-show/ None is working.

My code:

<div class="menu span-24">
  <ul class="mainNav span-24">
    <li class="current"> <a href="#a">HOME</a>
      <ul>
        <li> <a href="#aa">this is a long menu item line!</a> </li>
        <li class="current"> <a href="#ab">menu item</a>
          <ul>
            <li class="current"><a href="#">menu item</a></li>
            <li><a href="#aba">menu item</a></li>
            <li><a href="#abb">menu item</a></li>
            <li><a href="#abc">menu item</a></li>
            <li><a href="#abd">menu item</a></li>
          </ul>
        </li>
        <li> <a href="#">menu item</a>
          <ul>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
          </ul>
        </li>
        <li> <a href="#">menu item</a>
          <ul>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li> <a href="#">ABOUT</a> </li>
    <li> <a href="#">PORTFOLIO</a>
      <ul>
        <li> <a href="#">menu item</a>
          <ul>
            <li><a href="#">short</a></li>
            <li><a href="#">short</a></li>
            <li><a href="#">short</a></li>
            <li><a href="#">short</a></li>
            <li><a href="#">short</a></li>
          </ul>
        </li>
        <li> <a href="#">menu item</a>
          <ul>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
          </ul>
        </li>
        <li> <a href="#">menu item</a>
          <ul>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
          </ul>
        </li>
        <li> <a href="#">menu item</a>
          <ul>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
          </ul>
        </li>
        <li> <a href="#">menu item</a>
          <ul>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li> <a href="#">BLOG</a> </li>
    <li><a href="#">CONTACT</a></li>
  </ul>
</div>
<div class="middle span-24">
  <div class="content span-16"></div></div>

.......

Any help?

thx.

Answer 1

is working now, I just moved the scripts from the bottom of the page to the header. Clear is that I don't understand why people are recommending putting of this js files to the bottom of page since is not working in this way.

thx anyone :)