Search code examples
jqueryhtmlcssjquery-uijquery-ui-tabs

UL menu is displaying BEHIND jQuery UI tab and images

I have created an HTML page which uses simple CSS (no javascript) for menu navigation. I am however, using jQuery UI tab to display tabbed data on the same page.

When the menu drops down, it is appearing BEHIND the jQuery tabs (actually, the menu also appears BEHIND any images in text over which the menu drops over.

My (barebones) HTML looks like this:

<html>
    <body>
        <div>
            <div id="navigation2">
                <ul id="menu" style="margin-left:5px;">
                <li class="navigable">
                        <a class="menuitem" href="#">Foo</a>
                  <ul class="submenu">
                        <li><a href="">Foo Bar 1</a></li>
                     <li><a href="">Foo Bar 2</a></li>
                        <li><a href="">Foo Bar 3</a></li>
                  </ul>
               </li>
           </ul>
         </div>
      </div>
      <div id ="tdisp">
      <!-- jQuery tab display here ... -->
      </div>      
    </body>
</html>

and CSS file looks like this:

#navigation2{

    background-color: #2d2d2d;

    color: #FFFFFF;

    height: 35px;

    list-style-type: none;

    font-size: 15px;

}



#navigation2 ul li {

    list-style-type: none;

    padding: 7px 20px 7px 5px;

    float: left;

    }



#navigation2 a.menuitem, #navigation2 a.undecorated {

    color: #CCCCCC;

    text-decoration: none;

}





#navigation2 a.current{

    color:#FF0000;

}



#navigation2 ul li.navigable:hover {

    cursor: pointer;

    color: #FFFFFF;

    background-color: #535354;

    border-bottom-color: #c00000;

    border-bottom-width: 2px;

    border-bottom-style: solid;

}

I suspect its something to do with the z-order but I am not sure and would like to hear from the experts on here as to how to resolve this issue.

[[Edit]]

From the answers I have received so far, it appears the z-index is the culprit. However, can someone provide some more detail on how to actually fix this? (I'm actually a C++ developer so this is unfamiliar territory for me).

  • Do I add the z-index attribute to EVERY rule involving navigation2, or just one? - if only one is required which rule entry in the CSS file do I add the z-index to?

  • How do I check the jQuery tab z-index using (preferably) FF Firebug or Chrome developer tools?

Solution

  • Jake has it right. Up the Z-Index. You can check the Z-Index of the jquery Tab in Chrome Dev tools just to make sure you choose a higher Z-Index. The only reason i say check Chrome Dev Tools (or Firebug) is cause the jQuery UI Dialog has a Z-Index of 1000 the last time i checked. Just go with a ridiculously large #