First note that there should never be a space before :hover
.
So the basic HTML structure you're outlining is:
<ul id="navbar">
<li>
<ul class="sub1">
<li>
<ul class="sub2">
<li><a>Text</a><li>
</ul>
</li>
</ul>
</li>
</ul>
To refer to the li
and a
within .sub2
, you'd write:
#navbar ul ul li { style to apply to li }
#navbar ul ul li a { style to apply to a }
#navbar ul ul li:hover { style to apply to li on hover }
#navbar ul ul li:hover a { style to apply to a on li hover }
The reason the tutorial assigned classes is because using generic nested element is a really inefficient way of using CSS selectors; it's faster to use classes. For more info, see this article from CSS-Tricks.