CSS來正確顯示菜單

我有一個類別表，它保持子類別的無限級別。它看起來像以下snap shot所示。CSS來正確顯示菜單

enter image description here

在上述表中，第三列顯示父名稱。當鼠標按鈕懸停在父名稱上方時，會顯示一個菜單，以不同顏色顯示類別的樹結構。

當彈出菜單時，它將與其下面的父級名稱重疊（我無法正確地用文字表達它，請看上面的圖像）。應該使用哪些CSS或其他主題以便菜單正確顯示？

父名稱如下

<ul> 
    <li> 
     <div style='width:53px;cursor:hand;text-align:left; background-color:white; border:none; color:black; font-size:small;'> 

     <?php echo htmlspecialchars($name, ENT_QUOTES, 'UTF-8');?> 

     </div>        
    </li> 
</ul>

在情況下，顯示所需的整個菜單中的CSS顯示在<ul><li></li></ul>，它是如下。

.jqueryslidemenu{font:bold 9px Tahoma, Verdana, sans-serif;color:#fff;width: 100%;text-align:left;z-index:99999} 
.jqueryslidemenu ul{margin: 0;padding: 0px;list-style-type: none;z-index:99999} 
.jqueryslidemenu ul li{position: relative;display: inline;float: left;z-index:99999} 
.jqueryslidemenu ul li a{font:bold 12px Tahoma, Verdana, sans-serif;display: block;background:#000;color: #fff;padding: 3px 3px;text-decoration: none;z-index:99999} 
* html .jqueryslidemenu ul li a{display: inline-block;z-index:99999} 
.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{color: #fff;text-decoration: none;z-index:99999} 

.jqueryslidemenu ul li a:hover{background:#000;text-decoration:none;color: #03C;z-index:99999} 
.jqueryslidemenu ul li ul{position: absolute;left: 0;display: block;visibility: hidden;z-index:99999} 
.jqueryslidemenu ul li ul li{display: list-item;float: none;z-index:99999} 
.jqueryslidemenu ul li ul li ul{top:0;z-index:99999} 
.jqueryslidemenu ul li ul li a{font:bold 9px Tahoma, Verdana, Geneva, sans-serif;width: 140px;margin: 0;padding: 6px;border-top-width: 0;border-bottom: 1px solid gray;z-index:99999} 
.jqueryslidemenuz ul li ul li a:hover{color:#fff; background:#000;z-index:99999} 
.downarrowclass{position: absolute;top: 8px;right: 7px;display:none;z-index:99999} 
.rightarrowclass{position: absolute;top: 6px;right: 5px;z-index:99999}

來源

2012-10-01 Tiny

你檢查的重疊組件，在圖片「JSF」說的z-index小於實際的下拉列表中？ – MLeFevre

看起來像z-index問題。

難道是因爲這條線在你的CSS：

.jqueryslidemenu ul li a

擁有的99999這使得父鏈接文本顯示上述級聯彈出菜單的Z-index？將它的z-index降低到1，看看是否有幫助。

來源

2012-10-01 14:27:34 mikey242

它看起來像z-index被設置爲99999，這意味着它強制項目成爲最高。給那個特定的元素（ul li）一個自動或者1的z索引。通過給這個列一個特定的類來做到這一點。

HTML：

<li class="behind"></li>

CSS：

li.behind{ 
    z-index: auto; 
}

來源

2012-10-01 14:28:39

CSS來正確顯示菜單

回答

相關問題