CSSドロップダウン選択問題

Question

問題は、メニューオプションを選択すると、現在選択されているメニューオプションのドロップダウンがないことです。私は正しい答えを見つけることができず、答えを得るために正しい質問をGoogleに与えることができません。

「ドライバ」のようなドロップダウンメニュー項目を選択した場合を除いて、完全にドロップダウンが完全にうまく機能していない場合は、既に選択されている「ドライバ」を再度強調表示するとドロップダウンが表示されなくなります。私はまず「ホーム」と言う言葉を選択する必要があります。最初に、選択されていない「ドライバ」オプションにドロップダウンメニューが表示されます。

私は私が十分に尋ねているものを作ったことを願っています。ここに私のコードです。

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> 

任意の助けいただければ幸いです。ここで

が、私は "ドライバ"（ノーPHP）を選択すると、HTMLのレンダリングである

<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; 
}