UL菜單顯示BEHIND jQuery UI選項卡和圖像

我創建了一個使用簡單CSS（無javascript）進行菜單導航的HTML頁面。不過，我使用jQuery UI選項卡在同一頁面上顯示選項卡式數據。UL菜單顯示BEHIND 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的EVERY規則中，或者只是一個？ - 如果只有一個是需要哪個規則條目在CSS文件中添加z-index？
如何使用（最好）FF Firebug或Chrome開發人員工具檢查jQuery選項卡z-index？

來源

2011-11-15 Homunculus Reticulli

'＃navigation2 { background-color：＃2d2d2d; color：#FFFFFF; height：35px; list-style-type：none; font-size：15px; z-index：1000; }' –

謝謝邁克爾。我得到它的工作（我不得不將z-index添加到＃naviagtion2 ul li） –

傑克有它的權利。增加Z指數。您可以在Chrome開發工具中檢查jQuery Tab的Z索引，以確保您選擇更高的Z-Index。我說檢查Chrome開發工具（或Firebug）的唯一原因是導致jQuery UI對話框的Z索引爲1000，最後一次檢查。只要去一個可笑的大＃

來源

2011-11-15 03:40:58

我會嘗試你的navigation2元素的z-index的屬性撞了的東西大到一個試驗 - 試1000

來源

2011-11-15 01:53:34

如果您沒有任何問題與IE滾動，然後只是刪除jquery.ui.tabs.css或jquery-ui中的「位置：相對」 - *。css

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

沒有必要設置z-index。

來源

2013-04-18 20:19:16 Remy

@雷米 - 謝謝，你的回答完全救了我。我把它扔在我的頁面上：

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

它的工作方式就像一個cham。 IE7將會是我的死亡。

來源

2013-09-18 03:43:46

UL菜單顯示BEHIND jQuery UI選項卡和圖像

回答

相關問題