CSS Dropdown Auswahl Problem

Question

Das Problem, das ich habe, ist, dass, wenn ich eine Menüoption ausgewählt habe, gibt es keine Dropdown für die Menüoption, die derzeit ausgewählt ist. Ich kann weder die richtige Antwort finden noch die richtige Frage an Google stellen, um eine Antwort zu erhalten.

Das ganze Drop-down klappt ansonsten ganz gut, außer wenn ich einen Drop-Down-Menüeintrag wie "Drivers" wähle, wenn ich "Drivers" noch einmal markiert habe, gibt es jetzt kein Drop-Down mehr. Ich müsste sagen .. "Home" zuerst dann die nicht ausgewählte "Drivers" -Option hat jetzt das Dropdown-Menü angezeigt.

Ich hoffe, ich habe gemacht, was ich klar genug frage, jetzt hier ist mein Code.

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 *****/ 

Und hier ist mein 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> 

Jede Hilfe geschätzt sehr würde.

Hier ist der HTML gerendert, wenn ich "Drivers" (kein 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

Versuchen, diese zu Ihrem Code wählen: bitte

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