Help with menus, sub menus and such.....

Question

Hello
I have spent ages getting to this point and after checking everything over and over and over yet again I cannot figure out what is happening with the menus at the top of my page.
The first menu "Garrett Smith" operates fine. The sub menus appear directly under it as they should when it is moused over.
It is the second menu "Work" in which I am having a problem. When you mouseover "Work", "View by Discipline" should open directly underneath. Once "View by Discipline" is clicked the four submenus should then open, again directly underneath "Work" and "View by Discipline". Then once "Print", "Printmaking", "Illustration" or "Photography" is moused over the test menus should in turn pop up to the side of them lining up with the top of each, depending on which one is moused over.
I have checked my CSS, javascript and everything else over and over. I imagine it is something simple that I am simply overlooking as I have been searching though all of this for the better part of the day so it is all blending together.
Here is the link to the site if you need to see my attempts thus far:
http://garrettsmithprintdesign.com/
Any help would be greatly appreciated.

Answer 1

Hi Garrett,
   I'm not as familiar with a jquery script, but in many of the drop-downs I've created, the submenu is built as a nested sub-set of it's parent... for instance instead of this:
<li class="printbutton"><a href="#">Print</a></li>
<li class="printmakingbutton"><a href="#">Printmaking</a></li>
<li class="illustrationbutton"><a href="#">Illustration</a></li>
<li class="photographybutton"><a href="#">Photography</a></li>
                </ul>
          </li>
          </ul>
<div id="print">
<ul id="printmenu">
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
</ul>
</div>
You may have something that looks more like this:
<li class="printbutton"><a href="#">Print</a>
  <ul>
   <li><a href="#">test</a></li>
   <li><a href="#">test</a></li>
   <li><a href="#">test</a></li>
   <li><a href="#">test</a></li>
  </ul>
</li>
<li class="printmakingbutton"><a href="#">Printmaking</a></li>               
<li class="illustrationbutton"><a href="#">Illustration</a></li>
<li class="photographybutton"><a href="#">Photography</a></li>
</ul>           </li>           </ul>
This is just an example - NOT the solution, but I think this will put you more on track if you experiment a bit along these lines. Note that closing "<li> tag for the "print" link is AFTER the nested "<ul> tags of it's submenu.
Also, if this is still problematic, note that there are tons of free samples on the web (as well as many you can purchase). Also, I've found  Dreamweaver's "Spry menu system" isn't a bad place to start - it does have a few bugs, but it begins with a very basic double-drop down menu that you can fairly easily customize by editing the css...
Hope that helps,
Jesse