3rd level of a drop down menu

HTML & CSS
1

URL: http://tinyurl.com/2a4pmsz

This is very much a work in progress. I am having a hard time figuring out how to style the 3rd level of this drop down menu. If you hover over About Our Salon, the 3rd level starts at State of the Art Equipment.

I’m so lost…

2

Hi Susan,

Yes things do start getting more complex when a third level is introduced. Let’s take a look at this working example and I will point out what is controlling the third level.

Start with the html, highlighted below in blue is the third level UL, it is nested in the 4th LI of the Second level UL.


<ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Articles &raquo;</a>
        [B]<ul>[/B]
            <li><a href="#">Link One</a></li>
            <li><a href="#">Link Two</a></li>
            <li><a href="#">Link Three</a></li>
            [B]<li><a href="#">Link Four &raquo;</a>[/B]
                [COLOR=Blue]<ul>
                    <li><a href="#">Link One</a></li>
                    <li><a href="#">Link Two</a></li>
                    <li><a href="#">Link Three</a></li>
                    <li><a href="#">Link Four</a></li>
                </ul>[/COLOR]                    
            [B]</li>[/B]                    
            <li><a href="#">Link Five</a></li>
        [B]</ul>[/B]
    </li>
</ul>

If you view the page source of the link I gave you will see that I have comments that point out which selectors are effecting the sublists.


/*=== [B]Hide All Sublists[/B] ===*/
#nav li:hover [B]ul[/B], [COLOR=Blue]/*<-- 2nd level --*/[/COLOR]
#nav li:hover [B]ul ul[/B], [COLOR=Blue]/* <-- 3rd level--*/[/COLOR]
#nav li.sfhover ul, 
#nav li.sfhover ul ul {
    margin-left:-999em;
}
/*=== Sublist Font Colors ===*/

#nav li:hover li a, [COLOR=Blue]/*<-- 2nd level --*/[/COLOR]
#nav li.sfhover li a, 
#nav li:hover li li a, [COLOR=Blue]/* <-- 3rd level--*/[/COLOR]
#nav li.sfhover li li a {color:#000} /*[B]2nd and 3rd[/B] levels font color*/

#nav li li:hover a, [COLOR=Blue]/*<-- 2nd level --*/[/COLOR]
#nav li li.sfhover a,
#nav li li li:hover a, [COLOR=Blue]/* <-- 3rd level--*/[/COLOR]
#nav li li li.sfhover a {color:#7FFF00;} /*[B]2nd and 3rd[/B] levels font color [B]on hover*/[/B]

/*=== [B]Second Level[/B] UL position on hover ===*/

#nav [B]li[/B]:hover ul,
#nav [B]li[/B].sfhover ul{ 
    margin-left: -1px; /* show the sublist (line up with left border on main list items)*/
}
/*=== [B]Third Level[/B] UL position on hover ===*/

#nav[B] li li[/B]:hover ul,
#nav[B] li li[/B].sfhover ul {
    [COLOR=Blue]margin-left:10em;[/COLOR]
    top:-1px;
}

Do you see how that simple descendant selector is adding an extra li for the third levels?

That last ruleset is what is positioning the third UL on the right side (margin-left:10em)

You will also see that it adds :hover after the 2nd li in the selector then it is followed with UL giving you this:

#nav li li:hover ul

That is telling it where to position the third level while hover on the 2nd level LI.

Does that help make sense of it?

3

Oh my gosh! Thank you SO much. That is the simplest, clearest explanation I’ve ever seen. Bookmarking for sure!! I still have some work to do, but the basics are there. Thanks again!!

4

Glad you understood it :slight_smile:

The thing to remember with dropdowns is that your initial rules will be inherited by the children. It is a process of resetting your rules (when needed) as you style each sublist. The more sublists you have, and the more their styles get reset, the more complex things will get.