Question

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

除非我选择像“驱动程序”这样的下拉菜单项，否则整个下拉工作完全正常，那么如果我已经选择了“驱动程序”，那么现在没有下拉菜单。我必须首先选择说..“Home”然后未选中的“Drivers”选项现在会出现下拉菜单。

我希望我已经做了我要求的清楚，现在这是我的代码。

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

CSS下拉选择问题

1 个答案: