Flyout menu blues

programming web dev
1

Ok, I’ve got my menu to work but I’m having a very hard time in creating a “sub sub menu” For example

http://www.preciousjewelslearning.org/

When a user hovers over “Components” I would like to have another box flying out for pre school, and another box flying out of pre school, and so forth

pre school > overview > programs

Here is what I’ve got.


<div id="navigation">
<p id="menuHome"></p>
<ul id="menuOne" class="menuHoriz">
<li><a href="index.html">Home</a></li>
<li><a  href="about.html" onmouseover="setMenu('menuSubTwo')"  onmouseout="clearMenu('menuSubTwo')">About Us</a></li>
<li><a  href="" onmouseover="setMenu('menuSubThree')"  onmouseout="clearMenu('menuSubThree')">Components</a></li>
<li><a  href="" onmouseover="setMenu('menuSubFour')"  onmouseout="clearMenu('menuSubFour')">Services</a></li>
<li><a  href="contributions.html" onmouseover="setMenu('menuSubFive')"  onmouseout="clearMenu('menuSubFive')">Contributions</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
<ul id="menuSubTwo" class="menuVert" onmouseover="setMenu('menuSubTwo')" onmouseout="clearMenu('menuSubTwo')">
<li><a href="intro.html">Introduction</a></li>
<li><a href="mission.html">Mission</a></li></ul>


<ul id="menuSubThree" class="menuVert" onmouseover="setMenu('menuSubThree')" onmouseout="clearMenu('menuSubThree')">
<li><a href="preschool.html">Pre School</a></li>
<li><a href="afterschool.html">After School</a></li></ul>

<!--the flyout menut for menusubthree-->

<ul  id="menuSubThree" class="menuflysubThree"  onmouseover="setMenu('menuSubThree')"  onmouseout="clearMenu('menuSubThree')">
<li><a href="">Overview</a></li></ul>


<ul id="menuSubFour" class="menuVert" onmouseover="setMenu('menuSubFour')" onmouseout="clearMenu('menuSubFour')">
<li><a href="newsletter.html">Newsletter</a></li>
<li><a href="calendar.html">Calendar</a></li>
<li><a href="childcare.html">Child Care</a></li>
<li><a href="nutrition.html">Nutrition</a></li>
<li><a href="resource.html">Resources</a></li></ul>

<ul id="menuSubFive" class="menuVert" onmouseover="setMenu('menuSubFive')" onmouseout="clearMenu('menuSubFive')">
<li><a href="volunteers.html">Volunteers</a></li>
<li><a href="newsletter.html">Newsletter</a></li></ul>
<!--sub sub menus--></div>



#navigation {
position : relative;
background-image : url(../images/navigation/Precious-Jewels-Learning-Incorporated_03.jpg);
background-repeat : no-repeat;
width : 820px;
height : 47px;
font-size : 0.83em;
text-align : center;
font-weight : bold;
}
#navigation a:link, #navigation a:visited {
font-family : Garamond;
color : black;
text-decoration : none;
}
#navigation a {
display : block;
margin : 0;
padding : 0 3px;
}
#navigation a:hover {
color : #03c;
}
#navigation ul {
margin : 0;
padding-top : 12px;
padding-right : 0;
padding-bottom : 0;
padding-left : 0;
}
#navigation ul {
list-style-type : none;
}
ul.menuHoriz li {
float : left;
}
ul.menuVert {
position : absolute;
top : 20px;
visibility : hidden;
}
#navigation li {
display : block;
background-color : #fecd06;
width : 80px;
height : 25px;
margin : 0 60px 0 20px;
padding : 0;
color : #000;
}
ul#menuSubTwo {
left : 160px;
}
ul#menuSubThree {
left : 320px;
}
ul#menuSubFive {
left : 480px;
}

I’ve tried doing it but it gave me a really bad headache so your assistance would be greatly appreciated. Thanks in advance.