css - when i hover over bootstrap dropdown's each element does not occupy same background width -
i trying create dropdown list. not sure wrong code. when hover on each list element not mark full width in red color. here preview
here html:
<!-- navigation --> <nav class="navbar navbar-custom"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li> <a class="navbar-menu" href="#">deals</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle navbar-menu-title" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">action</a></li> <li><a href="#">another action</a></li> <li><a href="#">something else here</a></li> </ul> </li> </ul> </div> </div> </nav>
here css:
.navbar-custom { background-color: #128c7e; border-radius: 0px; } .navbar-custom { color: #ffffff; } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background-image: none !important; } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background-color: red; }
Comments
Post a Comment