I am having trouble with a drop-down menu. The first level works fine, but I can't seem to get the second level of the menu to display. Appreciate any help you can offer. Thank you.
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;
}