Question

我创建了一个HTML页面，它使用简单的CSS（无javascript）进行菜单导航。但是，我使用jQuery UI选项卡在同一页面上显示选项卡式数据。

当菜单下拉时，它出现在jQuery选项卡后面（实际上，菜单也会出现在菜单中的任何图像上。

我的（准分子）HTML看起来像这样：

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

和CSS文件如下所示：

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

}

我怀疑它与z顺序有关，但我不确定，并希望听到这里的专家如何解决这个问题。

[[编辑]]

从我到目前为止收到的答案来看，z-index似乎是罪魁祸首。但是，有人可以提供更多关于如何实际修复此问题的详细信息吗？（我实际上是一名C ++开发人员，所以对我来说这是一个不熟悉的领域）。

我是否将z-index属性添加到涉及navigation2的每个规则中，或只添加一个？ - 如果只需要一个CSS文件中的哪个规则条目，我是否将z-index添加到？
如何使用（最好）FF Firebug或Chrome开发人员工具检查jQuery标签z-index？

Answer 1

我会尝试将navigation2元素上的z-index属性提升为大型测试 - 尝试1000.

Answer 2

杰克说得对。上升Z指数。您可以在Chrome开发工具中查看jquery选项卡的Z-Index，以确保选择更高的Z-Index。我说检查Chrome Dev Tools（或Firebug）的唯一原因是因为jQuery UI Dialog上次检查时Z-Index为1000。只是去一个可笑的大＃

Answer 3

如果您对IE Scroll没有任何问题，那么只需删除＆＃34;位置：relative＆＃34;在jquery.ui.tabs.css或jquery-ui - * .css

中

.ui-tabs { /*position: relative;*/ padding: .2em; zoom: 1; }

无需设置z-index。

Answer 4

@Remy - 谢谢，你的回答完全救了我。我把它扔进了我的页面：

<!--[if IE 7]>
<style type="text/css">
    .ui-tabs {
        position: static;
    }
    .ui-tabs .ui-tabs-nav LI {
        position: static;
    }
</style>
<![endif]-->

它像cham一样工作。 IE7将是我的死亡。

UL菜单显示BEHIND jQuery UI选项卡和图像

4 个答案: