无法在悬停时更改字体颜色-Bootstrap Navbar

Question

So, I have a sub-navbar, which on hover only changes the color of the <li> and not of the text. Here is my code for your reference. What am I missing? I'm sure this is something really minor, that I am overlooking.

 .section-navbar { margin: -10px 0 0 -12px; } .section-navbar>ul { margin: 0px 0 -35px 0px; padding: 2px 0px; background-color: #ececec; height: 32px; } .section-navbar>ul>li { display: block; float: left; height: 30px; text-align: center; background-color: #ececec; border-right-color: #fff; border-right-width: thin; border-right-style: solid; border-radius: 2px; font-weight: normal; font-size: 12px; padding: 5px 20px; } .section-navbar>ul>li>a { display: inline-block; color: #999; text-decoration: none; } .section-navbar>ul>li.active { background-color: #0083ca; border-radius: 2px; border-top-color: #359dd5; border-top-style: solid; border-top-width: medium; text-decoration: none; padding: 7px 20px; margin-top: -5px; color: #fff; font-weight:bold; letter-spacing:0.5px; height: 35px; } .section-navbar>ul>li:hover { background-color: #0083ca; border-radius: 2px; border-top-color: #359dd5; border-top-style: solid; border-top-width: medium; text-decoration: none; margin: -5px 0; height:35px; color: #fff; } 

 <div class="section-navbar"> <ul> <li><a href="#">Search</a></li> <li><a href="#">Option 2</a></li> <li class="active">Lorem ipsum dolor sit</li> <li><a href="#">Option 4</a></li> </ul> </div> 

Answer 1

 .section-navbar { margin: -10px 0 0 -12px; } .section-navbar>ul { margin: 0px 0 -35px 0px; padding: 2px 0px; background-color: #ececec; height: 32px; } .section-navbar>ul>li { display: block; float: left; height: 30px; text-align: center; background-color: #ececec; border-right-color: #fff; border-right-width: thin; border-right-style: solid; border-radius: 2px; font-weight: normal; font-size: 12px; padding: 5px 20px; } .section-navbar>ul>li>a { display: inline-block; color: #999; text-decoration: none; } .section-navbar>ul>li.active { background-color: #0083ca; border-radius: 2px; border-top-color: #359dd5; border-top-style: solid; border-top-width: medium; text-decoration: none; padding: 7px 20px; margin-top: -5px; color: #fff; font-weight:bold; letter-spacing:0.5px; height: 35px; } .section-navbar > ul > li:hover a {color:red} .section-navbar>ul>li:hover { background-color: #0083ca; border-radius: 2px; border-top-color: #359dd5; border-top-style: solid; border-top-width: medium; text-decoration: none; margin: -5px 0; height:35px; color: red!important; } 

 <div class="section-navbar"> <ul> <li><a href="#">Search</a></li> <li><a href="#">Option 2</a></li> <li class="active">Lorem ipsum dolor sit</li> <li><a href="#">Option 4</a></li> </ul> </div> 

Answer 2

you have to work in this class given below.

   .section-navbar > ul > li:hover a {
     color:red
    }

Answer 3

Added :hover style for a . Also changed padding to a , so that the whole area is clickable.

 .section-navbar { margin: -10px 0 0 -12px; } .section-navbar>ul { margin: 0px 0 -35px 0px; padding: 2px 0px; background-color: #ececec; height: 32px; } .section-navbar>ul>li { display: block; float: left; height: 30px; text-align: center; background-color: #ececec; border-right-color: #fff; border-right-width: thin; border-right-style: solid; border-radius: 2px; font-weight: normal; font-size: 12px; } .section-navbar>ul>li>a { display: inline-block; color: #999; text-decoration: none; padding: 5px 20px; height: 25px; } .section-navbar>ul>li>a:hover{ color: #fff; } .section-navbar>ul>li.active { background-color: #0083ca; border-radius: 2px; border-top-color: #359dd5; border-top-style: solid; border-top-width: medium; text-decoration: none; padding: 7px 20px; margin-top: -5px; color: #fff; font-weight:bold; letter-spacing:0.5px; height: 35px; padding: 5px 20px; } .section-navbar>ul>li:hover { background-color: #0083ca; border-radius: 2px; border-top-color: #359dd5; border-top-style: solid; border-top-width: medium; text-decoration: none; margin: -5px 0; height:35px; color: #fff; } 

 <div class="section-navbar"> <ul> <li><a href="#">Search</a></li> <li><a href="#">Option 2</a></li> <li class="active">Lorem ipsum dolor sit</li> <li><a href="#">Option 4</a></li> </ul> </div>