I am trying to get my menu list items to hover orange and cursor to change to pointer, but only some of the links are doing that. How can I get all of them to hover? I have attached my HTML and my css code for styling the links.
HTML
<input type="checkbox" class="toggler">
<div class="hamburger"><div></div></div>
<div class="menu">
<div>
<ul class="menu-items">
<!-- <li class="home"><a href="#">Home</a></li> -->
<li><a href="#">About Us</a>
<ul>
<li><a href="#">New Here?</a></li>
<li><a href="#">What We Believe</a></li>
<li><a href="#">Meet Our Pastor</a></li>
<li><a href="#">Our Team</a></li>
<li><a href="#">Contact</a></li>
</ul>
</li>
<li><a href="#">Ministries</a>
<ul>
<li><a href="#">Get Connected</a></li>
<li><a href="#">Children</a></li>
<li><a href="#">Students</a></li>
<li><a href="#">Adults</a></li>
</ul>
</li>
<li><a href="#">Watch/Read</a>
<ul>
<li><a href="#">Sermons</a></li>
<li><a href="#">Bulletin</a></li>
</ul>
</li>
<li><a href="#">Events</a></li>
<li><a href="#">Give</a></li>
<button class="account">My Account</button>
</ul>
</div>
CSS
.toggler:checked ~ .menu > div > ul > li > ul > li > a:hover{
cursor: pointer;
color: orangered;
} ```