CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Mona Coder
Mona Coder

Reputation: 6316

Bootstrap Drop-Down li Customization Not Working

I am trying to customize the Bootstrap Drop-Down list as below by overwritting the li class but it is nit working! There is an example Here as well

<ul class="dropdown-menu">
 <li><a tabindex="-1" href="#">Action</a></li>
 <li><a tabindex="-1" href="#">Another action</a></li>
 <li><a tabindex="-1" href="#">Something else here</a></li>
 <li class="divider"></li>
 <li><a tabindex="-1" href="#">Separated link</a></li>
</ul>

and CSS is like

.dropdown-menu li: hover {
   background-color:#CCC;
  }

Is there any way I can add more spacing between li(s) as well?

Thanks

Upvotes: 1

Views: 470

Answers (3)

Femi
Femi

Reputation: 64700

You want to edit this entry in the bootstrap.css file to change the defaults color and vertical padding:

.dropdown-menu > li > a {
    clear: both;
    color: #333333;
    display: block;
    font-weight: normal;
    line-height: 20px;
    padding: 3px 20px;
    white-space: nowrap;
}

There is also a matching hover you should change.

EDIT: In the Bootstrap file, look for this:

.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-submenu:hover > a {
  text-decoration: none;
  color: #ffffff;
  background-color: #0081c2;
  background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
  background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
  background-image: -o-linear-gradient(top, #0088cc, #0077b3);
  background-image: linear-gradient(to bottom, #0088cc, #0077b3);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}

Upvotes: 0

Adrift
Adrift

Reputation: 59819

The main problem is specificity and the fact that the background-color that appears on :hover is actually a linear-gradient. To change this, you'll just want to use more specific selector:

.container .dropdown-menu li a:hover {
background-color: peru;
background-image: none; /* to disable the gradient */
}

http://jsfiddle.net/AXwga/5/

Upvotes: 1

Casio
Casio

Reputation: 1

.dropdown-menu li{
   padding: 5px 0;
}
or
.dropdown-menu li{
   line-height:25px;
}

Upvotes: 0

Related Questions