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

Popular posts from this blog

javascript - How to get current YouTube IDs via iMacros? -

c# - Maintaining a program folder in program files out of date? -

emulation - Android map show my location didn't work -