on hover text in list text-decoration not working

Question

I have an unordered list in which I have a link which has the same background color as the hover on text, so when the particular list is hovered the text is hidden. I am trying to remove that effect from the particular list so that text in it is not hidden.

I did the following:

 <ul class="dropdown"> <li class="active"><a href="index.html">Home</a></li> <li> <a href="#">About</a> <ul> <li><a href="about-us.html">TEIA</a></li> <li><a href="services-1.html">Board Members</a></li> <li><a href="services-2.html">Agenda</a></li> <li><a href="our-event.html">Vision & Mission</a></li> </ul> </li> <li> <a href="#">Members</a> <ul> <li><a href="portfolio-overlay.html">Membership Type</a></li> <li><a href="portfolio-classic.html">Code of Conduct</a></li> <li><a href="portfolio-overlay.html">Membership Benefits</a></li> <li><a href="portfolio-classic.html">Register/Join</a></li> </ul> </li> <li> <a href="#">Resources</a> <ul> <li><a href="blog.html">Upcoming Events</a></li> <li><a href="blog-grid.html">Previous Events</a></li> <li><a href="single-blog.html">Press Release</a></li> <li><a href="single-blog.html">Gallery</a></li> </ul> </li> <li><a href="contact-us.html">Contact Us</a></li> <li class="nyan" style="background-color: #00bfff; text-decoration: none;"> <a href="#">Log In</a> <ul> <li><a href="blog.html">Admin</a></li> <li><a href="blog-grid.html">Members</a></li> </ul> </li> </ul>

But still there is no change in it. Can anyone tell me what's wrong in my code?

Answer 1

Use particular class and then a:hover to target the text color. check snippet.

 li.nyan a:hover { color: #fff; }

 <ul class="dropdown"> <li class="active"><a href="index.html">Home</a> </li> <li><a href="#">About</a> <ul> <li><a href="about-us.html">TEIA</a></li> <li><a href="services-1.html">Board Members</a></li> <li><a href="services-2.html">Agenda</a></li> <li><a href="our-event.html">Vision & Mission</a></li> </ul> </li> <li><a href="#">Members</a> <ul> <li><a href="portfolio-overlay.html">Membership Type</a></li> <li><a href="portfolio-classic.html">Code of Conduct</a></li> <li><a href="portfolio-overlay.html">Membership Benefits</a></li> <li><a href="portfolio-classic.html">Register/Join</a></li> </ul> </li> <li><a href="#">Resources</a> <ul> <li><a href="blog.html">Upcoming Events</a></li> <li><a href="blog-grid.html">Previous Events</a></li> <li><a href="single-blog.html">Press Release</a></li> <li><a href="single-blog.html">Gallery</a></li> </ul> </li> <li><a href="contact-us.html">Contact Us</a></li> <li class="nyan" style="background-color: #00bfff; text-decoration: none;"><a href="#">Log In</a> <ul> <li><a href="blog.html">Admin</a></li> <li><a href="blog-grid.html">Members</a></li> </ul> </li> </ul>

Answer 2

add some other color to the content when hovered.

 .dropdown ul li:hover{ background: #0056b3; color:white; } .dropdown ul li:hover a{ color:white; }

 <ul class="dropdown"> <li class="active"><a href="index.html">Home</a> </li> <li><a href="#">About</a> <ul> <li><a href="about-us.html">TEIA</a></li> <li><a href="services-1.html">Board Members</a></li> <li><a href="services-2.html">Agenda</a></li> <li><a href="our-event.html">Vision & Mission</a></li> </ul> </li> <li><a href="#">Members</a> <ul> <li><a href="portfolio-overlay.html">Membership Type</a></li> <li><a href="portfolio-classic.html">Code of Conduct</a></li> <li><a href="portfolio-overlay.html">Membership Benefits</a></li> <li><a href="portfolio-classic.html">Register/Join</a></li> </ul> </li> <li><a href="#">Resources</a> <ul> <li><a href="blog.html">Upcoming Events</a></li> <li><a href="blog-grid.html">Previous Events</a></li> <li><a href="single-blog.html">Press Release</a></li> <li><a href="single-blog.html">Gallery</a></li> </ul> </li> <li><a href="contact-us.html">Contact Us</a></li> <li class="nyan" style="background-color: #00bfff; text-decoration: none;"><a href="#">Log In</a> <ul> <li><a href="blog.html">Admin</a></li> <li><a href="blog-grid.html">Members</a></li> </ul> </li> </ul>