Bootstrap dropdown button turns half black on clic

Question

Advance sorry for this silly question, I created a sign in dropdown button in navbar(navbar-inverse) but on clicking the button turns half black. I didnt customize the button and it is the simple plain red danger button. I have been searching for the reason but nothing is working. So please help me.

 <div class="navbar navbar-inverse" style="margin-bottom:0px">
            <div class="navbar-inner">
                <ul class="nav pull-right" style="margin-top:3px">
                    <li class="active span2"><a href="#">HOME</a></li>
                    <li><a href="#" class="span2">ABOUT</a></li>
                    <li><a href="#" class="span2">PRICING</a></li>
                    <li><a href="#" class="span2">CONTACT</a></li>
                    <li class="dropdown">                           
                        <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown" href="#">SIGN IN</button>
                        <ul class="dropdown-menu" style="margin-right:25px;margin-top:10px;width:230px">
                            <form align="center" style="text-align:center">
                                <div class="input-prepend">
                                    <span class="add-on" style="margin-top:10px"><i class="icon-user icon-black"></i></span>
                                    <input type="text" style="width:140px;margin-top:10px"/>
                                </div>
                                <input type="text" style="width:170px"/>
                            </form>
                        </ul>                   
                    </li>
                </ul>

            </div>
        </div>

Answer 1

The issue is because of the .navbar-inverse .nav li.dropdown.open and .navbar .nav li.dropdown.open classes .

Please use the following classes into your custom stylesheet , changing the background-color to your choice .

.navbar-inverse .nav li.dropdown.open > .dropdown-toggle, .navbar-inverse .nav   li.dropdown.active > .dropdown-toggle, .navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle {
background-color:#BD362F;
color: #FFFFFF;
 }
       .navbar .nav li.dropdown.open > .dropdown-toggle, .navbar .nav li.dropdown.active > .dropdown-toggle, .navbar .nav li.dropdown.open.active > .dropdown-toggle {
background-color:#BD362F;
color: #555555;
 }

The jsfiddle for you Jsfiddle with drop down