Multi-level drop down menu not working

Question

I have a drop down menu that works on the first level. But I can't get the second level of the menu to show. Thanks for help.

javascript

<script type="text/javascript">
$(document).ready(function () {
$('#nav li').hover(
function () {
//show submenu
$('ul', this).css({zIndex:90}).fadeIn(150);
},
function () {
//hide submenu
$('ul', this).fadeOut(150);

}
);

HTML

<input type="hidden" name="arav" /><ul id="nav">
<li> <a href="index2.html">Home</a>
</li>
<li> <a href="personnel.html">Who We Are</a>
</li>
<li> <a href="#">Neurologic Condition</a>
<ul>
<li><a href="sci.html">SCI</a></li>
<li><a href="tbi.html">TBI</a></li>
<li><a href="stroke.html">Other</a></li>
</ul>
</li>
<li> <a href="">Education</a>
<ul>
<li><a href="healthed.html">Health Education</a></li>
<li><a href="#"> Materials</a>
<ul>Videos
<li>Videos</li>
<li>Presentation</li>
<li>Movies</li>
</ul>

</li>

<li><a href="sciinfosheets.html">SCI Info Sheets</a></li>
</ul>
</li>
<li> <a href="stroke.html">Resources</a>
<ul>
<li><a href="statelevel.html">State Level</a></li>
<li><a href="nationallevel.html">National Level</a></li>
<li><a href="resourcesbycoutny2.html">Community Level</a></li>
</ul>
</li>

<li> <a href="research.html">Research</a></li>

<li> <a href="contactus.html">Contact Us</a>
</li>
</ul>

CSS

#nav {
margin:0;
padding:0;
list-style:none;
behavior: url(border-radius.htc);

}

/*LI display inline */
#nav li {
float:left;
display:block;
width:7em;
background:#0063dc;
position:relative;
z-index:500;
margin:0 1px;
}

/*parent menu*/
#nav li a {
display:block;
padding:5px 5px 5px 5px;
font-weight:700;
height:38px;
text-decoration:none;
color:#696969;
text-align:center;
color:#ffeecc;
}

#nav li a:hover
{
color:#eeeeee;
}

/* style for default selected value */ #nav a.selected {
color:#6699FF;
}
/* submenu */ #nav ul
{
position:absolute;
left:0;
display:none;
margin:0 0 0 -1px;
padding:0;
list-style:none;
}

#nav ul li
{
width:7em;
float:left;
overflow:hidden;
border-top:1px solid #eeeeee;
}

#nav ul a
{
display:block;
height:32px;
padding: 7px 4px;
color:white;
}

#nav ul a:hover
{
text-decoration:none;
}

Answer 1

It might be just a problem with your html:

<li><a href="#"> Materials</a>
<ul>Videos                 // this is not valid
<li>Videos</li>

is not valid html.

Do you have an example online?

Edit: I have added an example in jsfiddle .

One of the first problems I encountered, is your use of #nav ul li { overflow: hidden } . That means that everything that overflows your li (like the sub-sub menus) will be hidden. Apart from that you will have to add some positioning for the lowest level menus.

Answer 2

It still needs some tidying but the problem with the tertiary menu not showing was that #nav ul li had overflow:hidden set which no matter what hid the tertiary menu. Removing that fixes the problem. I also tweaked the JS a little in the demo below too.

Demo: jsfiddle.net/Marcel/kydTs

Answer 3

apart from the HTML error pointed out above, the CSS is not complete either, you've got all child lists positioned to appear flush left.. so they are actually just on top of each other plus you've got child li's set to overflow: hidden; so their children are also hidden

the the jQuery is slightly wrong, it's going to drop all the children li s soon as the first list is hovered on, I presume you just want the appear when it's immediate parent is hovered on?

amended CSS:

#nav {
margin:0;
padding:0;
list-style:none;
behavior: url(border-radius.htc);
}

#nav {width: 100%;}
#nav ul, #nav li {width: 7em;}

/*LI display inline */
#nav li {
float:left;
background:#0063dc;
position:relative;
z-index:500;
margin:0 1px;
text-align:center;
}

/*parent menu*/
#nav li a {
display:block;
padding:5px 5px 5px 5px;
font-weight:700;
height:38px;
text-decoration:none;
color:#ffeecc;
}

#nav li a:hover {
color:#eeeeee;
}

/* style for default selected value */ 
#nav a.selected {
color:#6699FF;
}
/* submenu */ 
#nav ul {
position:absolute;
display:none;
margin:0 0 0 -1px;
padding:0;
list-style:none;
}

#nav ul {left: 0;}
#nav ul ul {left: 100%; top: 0;}

#nav ul li {
/*overflow:hidden;*/
border-top:1px solid #eeeeee;
}

#nav ul li:hover {position: relative;}

#nav ul a {
display:block;
height:32px;
padding: 7px 4px;
color:white;
}

#nav ul a:hover {
text-decoration:none;
}

an amended script:

<script type="text/javascript">
$(document).ready(function() {

    $("#nav li").hover(
        function () {
        $(this).children("ul").fadeIn(250);
        },function(){
        $(this).children("ul").fadeOut(250);
    });//hover

});// document ready
</script>