CSS Drop Down Selection Issue - css

Question

The problem I am having is that once I have selected a menu option, there is no drop down for that menu option that is currently selected. I can't seem to find the right answer nor able to Google the right question to get an answer.
The whole drop down works perfectly fine otherwise, except if I select a drop down menu item like "Drivers" then if I re-highlight "Drivers" once it's already selected, there is now no drop down there. I would have to select say.. "Home" first then the unselected "Drivers" option now has the drop down menu appear.
I hope I have made what I'm asking clear enough, now here is my 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 *****/
And here is my 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); ?>">
Territory Manager
<div class="dropdown-content">
Add TM
Search TM
</div>
</li>
<li class="<?=Active("sales.php", $webpage); ?>">
Sales
<div class="dropdown-content">
Add Sales Person
Search Sales
</div>
</li>
<li class="<?=Active("drivers.php", $webpage); ?>">
Drivers
<div class="dropdown-content">
Add Driver
Search Drivers
</div>
</li>
<li class="<?=Active("passengers.php", $webpage); ?>">
Passengers
<div class="dropdown-content">
Add Passenger
Search Passengers
</div>
</li>
</ul>
</td>
</tr>
</table>
Any help would be greatly appreciated.
Here is the HTML rendered when I select "Drivers" (no PHP)
<table width="100%">
<tr>
<td>
<ul>
<li>
<a class="dropdown" href="menu.php">Home</a>
</li>
<li class="dropdown">
Territory Manager
<div class="dropdown-content">
Add TM
Search TM
</div>
</li>
<li class="dropdown">
Sales
<div class="dropdown-content">
Add Sales Person
Search Sales
</div>
</li>
<li class="active">
Drivers
<div class="dropdown-content">
Add Driver
Search Drivers
</div>
</li>
<li class="dropdown">
Riderz
<div class="dropdown-content">
Add Passenger
Search Passengers
</div>
</li>
</ul>
</td>
</tr>
</table>

Answer 1

Try adding this to your code:
.active:hover .dropdown-content{
display: block;
}