Кнопка выпадающего меню Bootstrap-CSS

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