problem displaying level 3 of flyout menu

html and css -flyout menu

[ofranko]

windows 7, 64, xhtm 1.0, ie 9, chrome, ff 4, expression web 4

i'm trying to update an older site by replacing js navigation with css only. I have a 3 tiered flyout menu, levels 1&2 work fine, but level 3 will not "flyout" given the css below.... if i remove {display:none} the flyout is present at all sub-menus (from level 2).. i only need it to flyout for the "Rehabilitation" menu item. i've included the css for level 3 and the html for my navigation <ul>
if you need more let me know...

i copied the struction from an online tutorial (css at this level is new to me)

thanks frank
css for level 3 flyout

/*====================================start of 3rd level=========================================*/

#navigation li:hover ul li ul {
display:none;
}

#navigation ul> ul> ul ul li ul {
left:110px;
background-color:#007d00;
}

#navigation ul > ul ul li:hover ul {
display: block;
}



===========================================================
my html for navigation-

<div id="navigation">
<ul> <!--======1st level unordered=============-->
<li><a href="default.html"> Home</a></li> <!--======1st level=============-->
<li>Services <!--======1st level=============-->
<ul><!--======2nd level unordered=============-->
<li><a href="services.html#nursing">Skilled Nursing</a></li> <!--======2nd level=============-->
<li><a href="services.html#ps">Provider Services</a></li><!--======2nd level=============-->
<li><a href="services.html#aide">Home Health Aide</a></li><!--======2nd level=============-->
<li><a href="services.html#msw">Medical Social Work</a></li><!--======2nd level=============-->
<li><a href="#">Rehabilitaion</a>

<ul>
<li><a href="services.html#pt">Physical Therapy</a></li><!--======3rd level=============-->
<li><a href="services.html#ot">Occupational Therapy</a></li><!--======3rd level=============-->
 </ul>
</li><!--========close rehab====-->
</ul>
</li>
<li><a href="conInfo.html">Contact info</a></li> <!--======1st level=============-->
<li><a href="faqs.html">FAQs</a></li> <!--======1st level=============-->
<li><a href="news.html">News</a></li> <!--======1st level=============-->
<li><a href="portal.html">Portal</a></li> <!--======1st level=============-->



</ul>
</div>

<!--==============================end navigation=================================================-->

[alt131]

Hi ofranko, and welcome to WebmasterWorld ;)

Thanks for posting your code, and if css is new, you've started with a challenge - but quite achievable. There is a fun tool called selectoracle [tux.theopalgroup.com] that provides an explanation for the selectors you might also find helpful.

But for now, If you look at your html, your third level flyout is:
#navigation ul li ul li ul
Reading from right to left that selects:
a ul (the third level),
that is a descendant of an li
that is a descendant of a ul (second level)
that is a descendant of a an li
that is a descendant of a ul (first level)
that is a descendant of an item with the Id navigation (the div)

But in your css, for example, you've used this
#navigation ul> ul> ul ul li ul
The ">" is a child selector, so selects elements that are direct children of the previous element. Again, reading right to left, that selects:
A ul (#1)
that is a descendent of an li
that is a descendent of a ul (#2)
that is a descendent of a ul (#3)
that is a child of a ul {#4) <--- but also check your html - ul's are children of li, not ul
that is a child of a ul (#5) <-- also as above
that is a descendant of an item with the Id navigation (the div)

So there are two problems - referenceing childrent hat don;t exist, plus a total of 5 "nested" ul's when the html only has 3.

So take your existing html and try something like this css:

/* Inserted just for the example so you can observe child and descendant selectors - see how this hides every ul that is a child of an li - which means it hides both the second and third level fly-outs */

[edit]clarifying egs[/edit]
li > ul {
display:none
}

/*Using descendent selectors, show the 2nd level flyout when hovering the 1st level */
#navigation ul li:hover ul {
display:block;
}

/*but at the same time, keep the third level hidden until the 2nd level is hovered */
#navigation ul li:hover ul li ul {
display:none;
}

/* Now, show the third level flyout when the 2nd level is hovered */
#navigation ul li ul li:hover ul {
background-color:#007d00;
display: block;
}