twitter bootstrap change background color of button with dropdown menu on click

Question

In Twitter Bootstrap 2, I want to be able to change the background color of a button in the navbar but only when the dropdown menu is clicked . I tried changing the CSS and I understood that the class background-color you can change is

    .dropdown-toggle {
     *margin-bottom: -3px;
     background-color: #fffffff;
     }

but that didn't work as it does it statically. I also tried

     .dropdown-toggle:active,
    .open .dropdown-toggle {
    outline: 0;
    background-color: #fffffff;
     } 

but that didn't work either (nothing happens).

HTML looks like this:

  <div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="brand" href="#">...</a>
      <!-- nav-collapse indicates what will be in collapsed navigation -->
      <div class="nav-collapse collapse">
        <ul class="nav">
          <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
          <li><a href="#about">...</a></li>
          <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">...<b class="caret"></b></a>
    <ul class="dropdown-menu">
          <li><a href="#">...</a></li>
          <li><a href="#">...</a></li>
              </ul>
          </li>
          ...

So I figured it was a JavaScript problem, but I'm not really sure how to do it. Does anyone else know and can help?

http://jsfiddle.net/3xdws/ code is here but it doesn't seem to show the dropdown items for some reason? oh well

Answer 1

You need to edit this class .dropdown .open in your css.

So if you wanted the background to change, it will be like this:

.dropdown.open {
    background: #fff;
}

And for the font color change it here:

.dropdown.open .dropdown-toggle {
    color: #000;
}

See the updated fiddle here