prevent child element from receiving parent's hover effect

You want list to have hover effect but not the submenu items:
<li>Company<img class="arrow-down" src="./images/navigate-arrows.png" alt="arrow down">
<div class="submenu-items">
<div>About</div>
<div>Careers</div>
<div>News</div>
<div>Events</div>
<div>Blog</div>
</div>
</li>

Offset child element to change color to black (instead of gray on the list):
.menu-items li:hover > .submenu-items {
color: black;
}

Comments

Popular posts from this blog

Code Wars: Data Reverse (6 kyu)

Code Wars: longest_palindrome (6 kyu)

Code Wars: Find the odd int