Help Please!

  • atlnycdude
  • Newbie
  • Newbie
  • atlnycdude
  • Posts: 6

Post 3+ Months Ago

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

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.

HTML Code:
Code: [ Select ]
<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>
  1. <div id="navigation">
  2. <p id="menuHome"></p>
  3. <ul id="menuOne" class="menuHoriz">
  4. <li><a href="index.html">Home</a></li>
  5. <li><a href="about.html" onmouseover="setMenu('menuSubTwo')" onmouseout="clearMenu('menuSubTwo')">About Us</a></li>
  6. <li><a href="services.html" onmouseover="setMenu('menuSubThree')" onmouseout="clearMenu('menuSubThree')">Services</a></li>
  7. <li><a href="contributions.html" onmouseover="setMenu('menuSubFive')" onmouseout="clearMenu('menuSubFive')">Contributions</a></li>
  8. <li><a href="contact.html">Contact Us</a></li>
  9. </ul>
  10. <ul id="menuSubTwo" class="menuVert" onmouseover="setMenu('menuSubTwo')" onmouseout="clearMenu('menuSubTwo')">
  11. <li><a href="intro.html">Introduction</a></li>
  12. <li><a href="mission.html">Mission</a></li>
  13. <!--<li><a href="contributions.html">Contributions</a>
  14.       <li><a href="contact.html">Contact Us</a></li>
  15. --></ul>
  16. <ul id="menuSubThree" class="menuVert" onmouseover="setMenu('menuSubThree')" onmouseout="clearMenu('menuSubThree')">
  17. <li><a href="overview.html">Components</a></li>
  18. <li><a href="programs.html">Services</a></li>
  19. <li><a href="afterschool.html">Pre School</a></li>
  20. <!--  <li><a href="services.html">Our Services</a></li>
  21.       <li><a href="contributions.html">Contributions</a>
  22.       <li><a href="contact.html">Contact Us</a></li>--></ul>
  23. <ul id="menuSubFive" class="menuVert" onmouseover="setMenu('menuSubFive')" onmouseout="clearMenu('menuSubFive')">
  24. <li><a href="volunteers.html">Volunteers</a></li>
  25. <li><a href="newsletter.html">Newsletter</a></li>
  26. <!--  <li><a href="teen.html">Teen Empowerment</a></li>
  27.       <li><a href="services.html">Our Services</a></li>
  28.       <li><a href="contributions.html">Contributions</a>
  29.       <li><a href="contact.html">Contact Us</a></li>--></ul>
  30. <!--sub sub menus-->
  31. </div>


Code: [ Select ]

#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;
}
  1. #navigation {
  2. position : relative;
  3. background-image : url(../images/navigation/Precious-Jewels-Learning-Incorporated_03.jpg);
  4. background-repeat : no-repeat;
  5. width : 820px;
  6. height : 47px;
  7. font-size : 0.83em;
  8. text-align : center;
  9. font-weight : bold;
  10. }
  11. #navigation a:link, #navigation a:visited {
  12. font-family : Garamond;
  13. color : black;
  14. text-decoration : none;
  15. }
  16. #navigation a {
  17. display : block;
  18. margin : 0;
  19. padding : 0 3px;
  20. }
  21. #navigation a:hover {
  22. color : #03c;
  23. }
  24. #navigation ul {
  25. margin : 0;
  26. padding-top : 12px;
  27. padding-right : 0;
  28. padding-bottom : 0;
  29. padding-left : 0;
  30. }
  31. #navigation ul {
  32. list-style-type : none;
  33. }
  34. ul.menuHoriz li {
  35. float : left;
  36. }
  37. ul.menuVert {
  38. position : absolute;
  39. top : 20px;
  40. visibility : hidden;
  41. }
  42. #navigation li {
  43. display : block;
  44. background-color : #fecd06;
  45. width : 80px;
  46. height : 25px;
  47. margin : 0 60px 0 20px;
  48. padding : 0;
  49. color : #000;
  50. }
  51. ul#menuSubTwo {
  52. left : 160px;
  53. }
  54. ul#menuSubThree {
  55. left : 320px;
  56. }
  57. ul#menuSubFive {
  58. left : 480px;
  59. }

I've tried doing it but it gave me a really bad headache so your assistance would be greatly appreciated. Thanks in advance.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

Post Information

  • Total Posts in this topic: 1 post
  • Users browsing this forum: No registered users and 76 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.