Question

除了点击任何地方（包括按钮）到退出下拉菜单 - 第二次点击时，所有样式都能正常运行。在这种情况下，背景将成为默认的蓝色。但是，当我点击按钮最初打开下拉菜单时，我的.buttonMenu：活动样式可以正常工作。如何设置退出菜单的第二次单击的样式？

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

观看已实施的代码here

Bootstrap-CSS下拉菜单按钮样式

1 个答案: