My webpage has a list with multiple items. Each item contains a hidden section that becomes visible when the item is hovered over. The hover effect changes the background color and bottom border of the item, as well as displays the hidden section. This behavior is achieved using CSS without any JavaScript. However, I am facing an issue where hovering over the displayed section causes the parent item to lose its hover styling. How can I ensure that the parent item retains its hover style even when hovering over the displayed section? Any help or guidance on this matter would be greatly appreciated.
<ul>
<li class="menuItem">
<a href="#">MenuItem</a>
<div class="menuBody></div>
</li>
</ul>