CODEWITHSUNDEEP
javascriptjqueryhtmlcss
kingkhan kkhan
kingkhan kkhan

Reputation: 179

targeting class inside class in css

I have a unordered list like the following. When I hover on the list Log In, the text was hiding so i did the following css to prevent it

li.nyan a:hover {
  color: #fff !important;
}
<ul>
  <li><a href="contact-us.html">Contact Us</a></li>
  <li class="nyan" style="background-color: #00bfff; "><a href="#">Log In</a>
    <ul>
      <li class="sss"><a href="admin">Admin</a></li>
      <li><a href="members">Member</a></li>
    </ul>
  </li>
</ul>

now when i hover on the child drop downs "admin" and "member", its hiding the log in text again, so i wanted to make the font color of text white when i hover on child dropdowns, i did something like this

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

i know its not correct, am not good in css, can anyone help me with this please?

Upvotes: 2

Views: 77

Answers (1)

Sumit Patel
Sumit Patel

Reputation: 4638

Try this you need to add one class to second ul link-color using that selector you need update the color. Check Snippet.

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

ul >  li > .link-color > li a:hover
{
  color:#fff;
}
<ul>
  <li><a href="contact-us.html">Contact Us</a></li>
  <li class="nyan" style="background-color: #00bfff; "><a href="#">Log In</a>
    <ul class="link-color">
      <li class="sss"><a href="admin">Admin</a></li>
      <li><a href="members">Member</a></li>
    </ul>
  </li>
</ul>

Upvotes: 2

Related Questions