CODEWITHSUNDEEP
twitter-bootstrap
Jasbir Singh
Jasbir Singh

Reputation: 31

how to change the background color of dropdown-content menu in bootstrap

Can anyone help me to find out.

This is my code:

<div class="dropdown">//I used Bootstrap
 <button class="btn btn-primary dropdown-toggle" onClick="myFunction()" onMouseOver="showlinks()" type="button" data-toggle="dropdown" style="border-radius:15px 0px 15px 0px; background-color:transparent; border-color:grey">Menu                
<span class="caret">
   </span>
  </button>
  <ul class="dropdown-menu">
     <li><a href="#">Login</a></li>
     <li><a href="#">Contact Us</a></li>
  </ul>
 </div>

Upvotes: 3

Views: 1635

Answers (3)

Vignesh V
Vignesh V

Reputation: 31

Please erase background-color:transparent in button

HTML

    <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" onClick="myFunction()" onMouseOver="showlinks()" type="button"ata-toggle="dropdown"style="border-radius:15px 0px 15px 0px; border-color:#fff">Menu                
    <span class="caret">
    </span>
        </button>
            <ul class="dropdown-menu">
                <li><a href="#">Login</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
     </div>

CSS

.dropdown ul li
 {
   background-color:#000;
  }

.btn-primary
 {
  color:#fff;
 } 
.btn-primary:hover
{
  background:#003259;
  color:#fff;
}

Upvotes: 0

David Wilkinson
David Wilkinson

Reputation: 5118

Firstly, make sure your bootstrap.css file is referenced before any custom CSS file you write. You can then override Bootstrap's styling by being more specific and using parent / child selectors to ensure your style overrides Bootstrap's, i.e.:

CSS:

.header .top-nav ul.dropdown-menu {
  background-color: #000;
}

Fiddle: https://jsfiddle.net/mmcjLxsw/

EDIT: FYI - doing it this way makes sure you don't have to use !important, which can tale element styles out of the cascading flow of a document's layout.

Upvotes: 2

Mark Fortez
Mark Fortez

Reputation: 1

If you want a quick change try this <ul class="dropdown-menu" style="background-color:#000000!important;" > and when you're changing background you will need yo change the text color so if you need to after this! Important; add this color:#ffffff!important;

Upvotes: 0

Related Questions