खोले बूटस्ट्रैप ड्रॉपडाउन टॉगल के रंग को कैसे बदलें?

Question

जब ड्रॉपडाउन खोला जाता है - मैं इसके डिफ़ॉल्ट रंग को बदलना चाहता हूं। मैं सीएसएस का उपयोग कर सीमा रंग और पृष्ठभूमि बदलना चाहता हूं। ,

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

मेरे सीएसएस कि मैंने कोशिश की:

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

यहाँ एचटीएमएल कोड है

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

मेरे चयनकर्ताओं में समस्या है?

#original.menu .nav-pills .dropdown .open .dropdown-toggle { 
    border: 1px solid blue; 
} 

#suggested.menu .nav-pills .dropdown .dropdown-toggle { 
    border: 1px solid red; 
} 

http://jsfiddle.net/userdude/mjbN7/

.open तत्व श्रृंखला में मौजूद नहीं है:

Answer 1

यहाँ अपने समस्या है।

और यहाँ की सीमा के साथ अपने बेला (जो दोनों .open और कोई border-style या border-width था शैली के लिए) है:

http://jsfiddle.net/userdude/bdCMU/4/

Answer 2

.nav-pills .open .dropdown-toggle, .nav > .open.active > a:hover { 
    background-color:#222; 
    border-color: #333; 
    } 

Answer 3

उपयोग इस वर्ग के लिए यदि आप के नवीनतम संस्करण का उपयोग कर रहे बूटस्ट्रैप।

.dropdown-toggle:active, .open .dropdown-toggle { 
     background:#FFF !important; 
     color:#000 !important; 
    } 

यह मेरी समस्या का समाधान करता है, शायद यह आपकी मदद करेगा।

Answer 4

यह भी मेरे लिए काम किया:

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