帶有許多子菜單的CSS未排序列表

Question

我寫了一個CSS未排序菜單，它確實顯示了正確的名字和子菜單。

每當我懸停[幫助臺系統]> [新任務]這是沒有問題顯示。

每當我懸停[Helpdesk系統]> [任務概述]時都出現問題。它顯示[硬件清單]> [新硬件]。

我猜的是[新任務>任務概述]和[硬件清單>新硬件]被隱藏和重疊。

我該如何解決這個問題？

HTML代碼：

<div id="topbanner"> 

<ul class="rightmenu"> 
    <li><a href="<? echo ROOT_NAME ?>/home.php">Home</a></li> 
    <li><a href="#">Profile</a></li> 
    <li><a href="#">Menu</a> 
     <ul> 
     <li><a href="#">Helpdesk System</a> 
      <ul> 
       <li><a href="#">New Task</a></li> 
       <li><a href="#">Tasks Overview</a></li> 
       <li><a href="#">Search Tasks</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Hardware Inventory</a> 
      <ul> 
       <li><a href="#">New Hardware</a></li> 
       <li><a href="#">Search Hardware</a></li> 
       <li><a href="#">No FME Assets</a></li> 
       <li><a href="#">Misplace Assets</a></li>       
      <li><a href="#">Hardware Tracking</a></li> 
      </ul> 
     </li> 
     <li><a href="<? echo ROOT_NAME; ?>/webspace/">Web Space</a></li> 
     <li><a href="#">Application System</a></li> 
     <li><a href="#">Vendor Contacts</a></li> 
     <li><a href="#">Administration</a> 
      <ul> 
       <li><a href="#">Staff Administration</a></li> 
       <li><a href="#">Department Overview</a></li> 
       <li><a href="#">Page Management</a></li> 
       <li><a href="#">Actions Tracking</a></li> 
       <li><a href="#">Login History</a></li>  
      </ul> 
     </li> 
     <li><a href="#">Logoff</a></li> 
     </ul> 
    </li> 
</ul> 
</div> 

CSS代碼：

#topbanner { 
width:100%; height:25px; margin:0;position:relative;background-color:#4c4e5a;display: block;} 

.rightmenu, .rightmenu ul, .rightmenu li, .rightmenu a { margin: 0; padding: 0; border: none; outline: none; } 

.rightmenu { float: right; }  
.rightmenu li a{ 
display: block; padding: 0 14px; margin: 3px 0;color: #f3f3f3;background-color: #4c4e5a;} 

.rightmenu ul { 
    position: absolute; 
opacity: 0; 
background-color: #4c4e5a; 
left: auto; 
right:0; 
width:180px; 
} 

.rightmenu ul ul { 
position: absolute; 
opacity: 0; 
right: 100%; 
top: 0%; 
background-color: #4c4e5a; 
width:180px; 
} 

.rightmenu li:hover > a { color: #8fde62; } 
.rightmenu li:hover > ul { opacity: 1; } 

.rightmenu ul li{ 
height:0; 
overflow:hidden; 
padding: 0; 
} 

.rightmenu li:hover > ul li { 
height: 25px; 
overflow: visible; 
padding:0; 
} 

.rightmenu ul li a { 
white-space: nowrap; 
border: none; 
} 

我們爲了使代碼簡短你省略了一些造型。 （如陰影，邊框樣式和圓角）

Answer 1

您的一個問題是，如果您使用「display：none」，則使用「opacity：0」。 opacity屬性只設置元素的alpha級別，但顯示設置元素如何與頁面上的其他元素進行交互。

然而，你的主要問題是你已經推廣了你的CSS。通常推廣代碼是一個很好的習慣，但在這種情況下，您需要對用戶指向的導航級別進行更具體的描述。

這裏是代碼位，你應着眼於：

.rightmenu ul { 
    position: absolute; 
    display: none; 
    background-color: #4c4e5a; 
    left: auto; 
    right:0; 
    width:180px; 
    top: 25px; 
} 

.rightmenu ul ul { 
    position: absolute; 
    display: none; 
    right: 0%; 
    top: 0%; 
    background-color: #4c4e5a; 
    width:180px; 
} 
.rightmenu ul ul:hover, .rightmenu li li:hover > ul { 
    right: 100%; 
    display: block; 
} 

.rightmenu li:hover > a { color: #8fde62; } 
.rightmenu li:hover > ul, .rightmenu li > ul:hover { display: block; } 

DEMO