Troublesome nav bar dropdown styles

[Historical Forums User]

I’m having trouble styling a bootstrap dropdown menu. Currently when you hover over the dropdown item the background color doesn’t cover the entire width of the li. The is white space to the right.

Here is the html and css:

<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown Menu <span class="caret"></span></a>
  <ul class="dropdown-menu">

    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</li>


.dropdown-menu>li>{
    padding:0px !important;
    margin:0px !important;
    display: block;
    width:100% !important;
}

.dropdown-menu>li:hover{
    background-color: #52add3 !important;
    color: #fff !important;
    padding:0px;
}

.dropdown-menu>li>a{

    color:#171d2b;
    text-decoration: none;
    display: block;
    width:100% !important;
}

.dropdown-menu>li>a:hover{
    background-color: #52add3 !important;
    color: #fff !important;
}

Here is a live example:
http://aaronhaas.com/ben/

Any ideas?

[Paulie_D]

It’s because this

media screen and (min-width: 768px)
.site-nav li {
    float: left;
    padding: 10px 8px;
}

is affecting ALL your liand not just the top level ones.

You need to make it more specific

.site-nav  >  li { /* see the difference? */
    float: left;
    padding: 10px 8px;
}

[Historical Forums User]

Thanks Paulie, I just tried that and also tried changing this one as well. Didn’t seem to change anything

media screen and (min-width: 768px)

[Paulie_D]

Works when I check in Dev Tools.

There is no reason to float the submenu li….and they will collapse to their own width if floated.

Dunno what to tell you.

[Senff]

It didn’t change anything because the change that Paulie suggested isn’t there; it’s still the old code at http://aaronhaas.com/ben/assets/css/style.css, line 673:

@media screen and (min-width: 768px){
  .site-nav li{
    float:left;
    /*padding:10px 8px;*/
    padding:0px;
  }

[Author]

Posts