Bootstrap-CSS下拉菜单按钮样式

Question

除了当我单击任意位置（包括按钮上的内容）以退出下拉菜单（第二次单击）时，所有样式均工作正常。 在这种情况下，背景变为默认的蓝色。 但是，当我单击按钮最初以打开下拉菜单时，我的.buttonMenu：active样式可以正常工作。 如何设置退出菜单的第二次单击的样式？

HTML：

<div class="dropdown">
    <button style="float:right;" class="btn btn-primary dropdown-toggle buttonMenu" type="button" data-toggle="dropdown"><?php echo "$userFullName"; ?></button>
        <ul class="dropdown-menu dropdown-menu-right">
            <li><a href="#">Profile</a></li>
            <li><a href="#">Settings</a></li>
            <li><a href="logout.php">Sign out</a></li>
        </ul>
</div>

CSS：

.buttonMenu{
background: none;
border: none;
display: inline-block;
font-family: 'Ubuntu', sans-serif;
font-weight:400;
font-size: 1.3em;
font-style: italic;
color:#F5F5F5;
text-align: right;
margin-top:4.8%;
margin-right:2%;
}

.buttonMenu:hover {
background-color: #AE4936 !important;
border: none !important;
outline: none !important;
}

.buttonMenu:active {
background-color: #AE4936 !important;
outline: none !important;
border: none !important;
}

.buttonMenu:focus {
background-color: #AE4936 !important;
outline: none !important;
border: none !important;
}

Answer 1

您必须为下拉按钮的打开状态添加自定义样式，如下所示

.open>.dropdown-toggle.buttonMenu{
     background-color: #AE4936 !important;
     outline: none !important;
     border: none !important;
}

在此处观看您的实现代码