Help Please

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/

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

components > pre school > and so forth

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="services.html" onmouseover="setMenu('menuSubThree')"  onmouseout="clearMenu('menuSubThree')">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>
<!--<li><a href="contributions.html">Contributions</a>
            <li><a href="contact.html">Contact Us</a></li>
--></ul>
<ul id="menuSubThree" class="menuVert" onmouseover="setMenu('menuSubThree')" onmouseout="clearMenu('menuSubThree')">
<li><a href="overview.html">Components</a></li>
<li><a href="programs.html">Services</a></li>
<li><a href="afterschool.html">Pre School</a></li>
<!--    <li><a href="services.html">Our Services</a></li>
            <li><a href="contributions.html">Contributions</a>
            <li><a href="contact.html">Contact Us</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>
<!--    <li><a href="teen.html">Teen Empowerment</a></li>
            <li><a href="services.html">Our Services</a></li>
            <li><a href="contributions.html">Contributions</a>
            <li><a href="contact.html">Contact Us</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.