CSS Trying to understand Alternate syntax when creating drop down list in CSS and HTML

Question

I am seeing two different ways of referring to the unordered lists (<ul>), list items (<li>) and anchors (<a>).

I want to set the attributes of these items in a drop down list with at least two levels of nested <ul>.

My question is specifically about the ways to refer to the different levels of <ul>, <li> and <a> there in.

I have named the navigation bar id="navBar".

I have seen on youtube: Building a drop down navigation bar

The syntax used is:

ul#navBar .sub1 li
ul#navBar .sub1 li a

Where the class ".sub1" has been defined, and is the first level of nested <ul>, and ".sub2" is the second level of nested <ul>.

Referencing these levels, the code used is.

ul#navBar .sub2 a {
                  background-color: blue;}

ul#navBar li:hover > a {
            background-color: #CFC;
            }

It seems to me, that going to the bother of defining .sub1 and .sub2 is superfluous, and I have been using the format:

#navBar ul li{ background-color: blue;}

#navBar ul li:hover ul{ background-color: red;}

REAL QUESTION:

What is the correct syntax, using my (code just above) style of formatting. To refer to a second level nested <ul> and affect the <li> or the <a> there in?

I assumed it was along the lines of:

 #navBar ul li ul li: hover ul{ background-color: red;}

But I am wrong :(

Answer 1

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.