How to change color of opened Bootstrap dropdown toggle?

Question

When Dropdown is opened - I want to change default color of it. I want to change border color and background using css.

http://i.imgur.com/w6WIN.png

Here is html code:

<div class="row menu">
 <ul class="nav nav-pills pull-right">
  <li class="dropdown">
    <a href="#" class="dropdown-toggle"
       data-toggle="dropdown">
      My reports
      <span class="caret my-reports-caret"></span>
    </a>
    <ul class="dropdown-menu">
      <li><%= link_to "Performance", performance_reports_path %></li>
      <li class="divider"></li>
      <li><%= link_to "Account settings", '#' %></li>
    </ul>
  </li>
</ul>
</div>

My css,that I tried:

.menu .nav-pills .dropdown .open .dropdown-toggle{
    background-color: red;
}

Where is problem in my selectors ?

Answer 1

This worked for me, too:

.dropdown-toggle[aria-expanded="true"] {
  background:#FFF !important;
  color:#000 !important;
}