CSS 下拉选择问题

Question

我遇到的问题是，一旦我选择了一个菜单选项，就没有当前所选菜单选项的下拉列表。我似乎找不到正确的答案，也无法通过 Google 搜索正确的问题来获得答案。

否则整个下拉菜单工作得很好，除非我选择一个下拉菜单项，如“驱动程序”，然后如果我在已经选择了“驱动程序”后重新突出显示，现在那里没有下拉菜单。我必须先选择 say..“主页”，然后未选择的“驱动程序”选项现在会出现下拉菜单。

我希望我已经把我的问题说清楚了，现在这是我的代码。

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>

如有任何帮助，我们将不胜感激。

这是我选择“Drivers”(无 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;
}