CSS菜單 - 顯示活動頁面項目子菜單

Question

我有一個典型的CSS頂部導航，當您翻轉不同的父菜單項時會顯示一個子菜單。如何更改代碼以保持活動子菜單的顯示。因此，如果您在該父菜單項或其子項的頁面上，則會保留該子菜單，除非您將鼠標懸停在另一個父菜單項上。

這裏是一個的jsfiddle鏈接代碼：http://jsfiddle.net/cgzUm/

代碼本身：

<div id="topbar"> 
<div id="navbar"> 
    <div class="elements"> 
     <ul> 
      <li id="menua"><a href="#">Menu A</a> 
       <div class="subnavbar"> 
        <ul> 
         <li><a href="#">Submenu A1</a></li> 
         <li><a href="#">Submenu A2</a></li> 
         <li><a href="#">Submenu A3</a></li> 
        </ul> 
       </div> 
      </li> 
      <li id="menub"><a href="#">Menu B</a> 
       <div class="subnavbar"> 
        <ul> 
         <li><a href="#">Submenu B1</a></li> 
         <li><a href="#">Submenu B2</a></li> 
         <li><a href="#">Submenu B3</a></li> 
        </ul> 
       </div> 
      </li> 
      <li id="menuc"><a href="#">Menu C</a> 
       <div class="subnavbar"> 
        <ul> 
         <li><a href="#">Submenu C1</a></li> 
         <li><a href="#">Submenu C2</a></li> 
         <li><a href="#">Submenu C3</a></li> 
        </ul> 
       </div> 
      </li> 
      <li id="menud"><a href="#">Menu D</a> 
       <div class="subnavbar"> 
        <ul> 
         <li><a href="#">Submenu D1</a></li> 
         <li><a href="#">Submenu D2</a></li> 
         <li><a href="#">Submenu D3</a></li> 
        </ul> 
       </div> 
      </li> 
     </ul> 
    </div> 
</div>   

而且CSS代碼：

#navbar { position: relative; width: 990px; height: 40px; z-index: 12; margin: 0px auto; } 
#navbar .elements { display: inline; float: left; position: relative; width: 100%; height: 100%; text-align: center; margin: 0px; padding: 0px; text-align: center; } 
#navbar .elements > ul { clear: left; display: inline; float: left; position: relative; left: 50%; height: 40px; margin: 0px; padding: 0px; list-style-type: none; margin: 0px; } 
#navbar .elements > ul > li { display: inline; float: left; position: relative; right: 50%; text-transform: uppercase; margin: 0px; padding: 10px 0px 5px 0px; height: 25px; font-size: 14px; } 
#navbar .elements > ul > li > a { display: block; color: #002B55; overflow: hidden; font-size: 12px; font-weight: 700; text-decoration: none; height: 25px; line-height: 25px; padding: 0px 25px; margin: 0px; } 
#navbar .elements a:hover, #navbar .elements li a.selected { color: #0073AE; } 
#navbar .elements > ul > li:hover .subnavbar { display:block; } 
#navbar .elements > ul > li > a:active .subnavbar { display:block; } 
#navbar .subnavbar { position: fixed; width: 100%; height: 27px; top: 40px; left: 0px; background-color: #FFF; border-top: 1px solid #2B2B2B; text-align: center; margin: 0px; padding: 0px; overflow: hidden; z-index: 13; display: none; } 
#navbar .subnavbar.over { display: block; padding-bottom: 7px; } 
#navbar .subnavbar ul { height: 27px; z-index: 5; list-style-type: none; margin: 0px auto; padding: 0px; } 
#navbar .subnavbar ul li { display: inline; text-transform: uppercase; } 
#navbar .subnavbar ul li a { text-decoration: none; line-height: 27px; font-size: 12px; padding: 7px 8px 7px 9px; color: #002B55; } 
#navbar .subnavbar ul li a:hover { color: #0073AE; } 
#navbar .subnavbar ul li a.selected { color: #0073AE; } 
#navbar .selected .subnavbar { z-index: 12; } 
#navbar ul > li.selected div.subnavbar { display: block; } 
#navbar .elements > ul > li { padding-bottom: 6px; } 

Answer 1

首先，添加類=在活動菜單項目li上的「活動」，如下所示：

<li id="about" class="active"><a href="/wordpress/about">About</a> 

然後加入這行CSS的：

#navbar .elements > ul > li.active .subnavbar { display:block; z-index:1; } 

和更新的z-index就這一個：

#navbar .elements > ul > li:hover .subnavbar { display:block; z-index:2;} 

的jsfiddle：http://jsfiddle.net/cgzUm/4/