- This topic is empty.
-
AuthorPosts
-
May 1, 2016 at 6:46 am #241123Historical Forums UserParticipant
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?
May 1, 2016 at 9:27 am #241126Paulie_DMemberIt’s because this
media screen and (min-width: 768px) .site-nav li { float: left; padding: 10px 8px; }
is affecting ALL your
li
and not just the top level ones.You need to make it more specific
.site-nav > li { /* see the difference? */ float: left; padding: 10px 8px; }
May 1, 2016 at 9:59 am #241131Historical Forums UserParticipantThanks 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)
May 1, 2016 at 10:23 am #241132Paulie_DMemberWorks 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.
May 1, 2016 at 10:48 am #241133SenffParticipantIt 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; }
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.