I am working with a menu structure that looks like this:
<ul class"menu">
<li>
<a>item1</a>
<ul>
<li><a>subitem1</a></li>
<li><a>subitem2</a></li>
<li><a>subitem3</a></li>
<li><a>subitem4</a></li>
<li>
<a>item2</a>
<ul class="sub-ul-2">
<li><a>subitem5</a></li>
<li><a>subitem6</a></li>
<li><a>subitem7</a></li>
<li><a>subitem8</a></li>
</ul>
</li>
</ul>
</li>
</ul>
My task is to make it so that when hovering over item1, only subitem1, subitem2, subitem3, and subitem4 are displayed, while subitem5 - 8 remain hidden. Similarly, when hovering over item2, only subitem5 - 8 should be displayed. I need to achieve this using CSS.
I have attempted the following CSS code:
ul.menu ul{
display: none;
}
ul.menu li:hover:first-child ul {
display:block;
}