CSS下拉選項問題

Question

我遇到的問題是，一旦我選擇了一個菜單選項，沒有下拉對於當前選擇的菜單選項。我似乎無法找到正確的答案，也沒有能夠谷歌的權利問題得到答案。

整個下拉菜單完全沒問題，除非我選擇了像「驅動程序」這樣的下拉菜單項目，那麼如果我選擇「驅動程序」後再重新選中，那麼現在就沒有下拉菜單了。我會選擇說..「家」第一則未選擇「驅動程序」選項現在有下拉菜單出現下降。

我希望我已經問什麼，我再清楚不過，現在這裏是我的代碼。

CSS：

/***** Begin Menu CSS *****/ 
ul { 
    width: 100%; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #333; 
} 

li { 
    float: left; 
} 

li a, .dropbtn{ 
    display: inline-block; 
    font-size: 15px; 
    color: white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
    border-right: 1px solid #bbb; 
} 
/* Color of the main menu text when hovering */ 
li a:hover { 
    background-color: red; 
} 
/* Once the mouse has moved off the main menu button and is now highlighting a sub menu button, this defines what that main menu button color is */ 
.dropdown:hover{ 
    background-color: red; 
} 
/* Color of main menu button when not selected */ 
.dropbtn { 
    background-color: 333; 
} 
li .dropdown { 
    position:relative; 
    display: inline-block; 

} 
li:last-child { 
    border-right: none; 
} 
.dropdown-content{ 
    display: none; 
    position: absolute; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    box-shadow: 5px 7px 5px 0px rgba(0,0,0,0.2); 
    z-index: 1; 
} 
/* Links inside the dropdown */ 
.dropdown-content a{ 
    color: black; 
    padding: 12px 16px; 
    text-decoration: none; 
    display: block; 
    text-align: left; 
    background-color: #f6f6f6; /* Sets background color of the drop down menu (not selected) */ 
} 
/* Change color of dropdown links on hover */ 
.dropdown-content a:hover {background-color: #ccc} 

.dropdown:hover .dropdown-content{ 
    display: block; 
} 
/* I have no idea what this does as it appears nothing... 
li a:hover:not(.active) { 
    background-color: #blue; 
} */ 
.active { 
    background-color: #990000; 

} 
.active dropdown-content{ 
    display: none; 
    position: absolute; 
    min-width: 160px; 
    box-shadow: 5px 7px 5px 0px rgba(0,0,0,0.2); 
    z-index: 1; 
} 
.active dropdown-content a{ 
    color: black; 
    padding: 12px 16px; 
    text-decoration: none; 
    display: block; 
    text-align: left; 
} 
/***** End Menu CSS *****/ 

這裏是我的HTML：

//PHP Function 
function Active($menuselection, $page){ 
    if($page == "$menuselection"){ 
     echo "active"; 
    }else{ 
     echo "dropdown"; 
    } 
} 
(HTML) 
<table width="100%"> 
<tr> 
    <td> 
     <ul> 
      <li> 
       <a class="<?=Active("menu.php", $webpage); ?>" href="menu.php">Home</a> 
      </li> 
      <li class="<?=Active("tms.php", $webpage); ?>"> 
       <a href="javascript:void(0)" class="dropbtn">Territory Manager</a> 
       <div class="dropdown-content"> 
        <a href="#">Add TM</a> 
        <a href="search.php?search=TM">Search TM</a> 
       </div> 
      </li> 
      <li class="<?=Active("sales.php", $webpage); ?>"> 
       <a href="javascript:void(0)" class="dropbtn">Sales</a> 
       <div class="dropdown-content"> 
        <a href="#">Add Sales Person</a> 
        <a href="search.php?search=sales">Search Sales</a> 
       </div> 
      </li> 
      <li class="<?=Active("drivers.php", $webpage); ?>"> 
       <a href="drivers.php" class="dropbtn">Drivers</a> 
       <div class="dropdown-content"> 
        <a href="#">Add Driver</a> 
        <a href="drivers.php">Search Drivers</a> 
       </div> 
      </li> 
      <li class="<?=Active("passengers.php", $webpage); ?>"> 
       <a href="javascript:void(0)" class="dropbtn">Passengers</a> 
       <div class="dropdown-content"> 
        <a href="#">Add Passenger</a> 
        <a href="search.php?search=passengers">Search Passengers</a> 
       </div> 
      </li> 
     </ul> 
    </td> 
</tr> 
</table> 

任何幫助將不勝感激。

這裏呈現的HTML，當我選擇 「驅動程序」（沒有PHP）

<table width="100%"> 
<tr> 
    <td> 
     <ul> 
      <li> 
       <a class="dropdown" href="menu.php">Home</a> 
      </li> 
      <li class="dropdown"> 
       <a href="javascript:void(0)" class="dropbtn">Territory Manager</a> 
       <div class="dropdown-content"> 
        <a href="#">Add TM</a> 
        <a href="search.php?search=TM">Search TM</a> 
       </div> 
      </li> 
      <li class="dropdown"> 
       <a href="javascript:void(0)" class="dropbtn">Sales</a> 
       <div class="dropdown-content"> 
        <a href="#">Add Sales Person</a> 
        <a href="search.php?search=sales">Search Sales</a> 
       </div> 
      </li> 
      <li class="active"> 
       <a href="drivers.php" class="dropbtn">Drivers</a> 
       <div class="dropdown-content"> 
        <a href="#">Add Driver</a> 
        <a href="drivers.php">Search Drivers</a> 
       </div> 
      </li> 
      <li class="dropdown"> 
       <a href="javascript:void(0)" class="dropbtn">Riderz</a> 
       <div class="dropdown-content"> 
        <a href="#">Add Passenger</a> 
        <a href="search.php?search=passengers">Search Passengers</a> 
       </div> 
      </li> 
     </ul> 
    </td> 
</tr> 
</table> 

Answer 1

嘗試增加給你的代碼：

.active:hover .dropdown-content{ 
    display: block; 
}