Drop Down Menu Dilemma....

[therschbach]

I got my PHP figured out (finally!), but now I'm having a problem. I have a drop-down menu that appears via style:visibility = visible onMouseOver a container div, which contains the drop-down menu as well. This allows the menu to stay revealed as long as the mouse is over either the menu itself, or the button that reveals the menu.I have a second set of menus that I want to reveal from hovering over each link contained in the first menu. I have it set to reveal the sub-menus when the mouse is over each respective <td> containing the menu "title". The problem is, when the sub-menu becomes visible, I drag my mouse over to it but as soon as the mouse leaves the <td> area and enters the margin of the main menu div, the sub-menu disappears if I have a onMouseOut set to style:visibility = hidden. So, I think the solution is to have the onMouseOver for each main menu <td> set to hide the previous menu that was opened before opening the new menu. I'm having trouble doing this though. Here's what I have so far that's related to the menus, this first set of code operates how I described above.You can see it at www.dirtjournal.com/DirtJournal2/index2.php .Look at the Archives menu.JS:

		<div id="archivesfield" onMouseOver="reveal('archivesyear')" onMouseOut="hide('archivesyear')">	<img id="archives" src="pictures/button4.jpg" alt="Archives">		  	<!-- Year Menu Builder -->	  <div id='archivesyearmenu'><table id='archivesyeartable'><tr><td id='05' onMouseOver='menuButtonOn(this), reveal("05");'  onMouseOut='menuButtonOff(this), hide("05");'>2005</td></tr><tr><td id='06' onMouseOver='menuButtonOn(this), reveal("06");'  onMouseOut='menuButtonOff(this), hide("06");'>2006</td></tr><tr><td id='07' onMouseOver='menuButtonOn(this), reveal("07");'  onMouseOut='menuButtonOff(this), hide("07");'>2007</td></tr><tr><td id='08' onMouseOver='menuButtonOn(this), reveal("08");'  onMouseOut='menuButtonOff(this), hide("08");'>2008</td></tr></table></div><div id='allMonthMenus'><div id="05menu" class="monthMenu"><table class="monthTable"><tr><td id="705" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>August</td></tr><tr><td id="805" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>September</td></tr><tr><td id="905" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>October</td></tr><tr><td id="1005" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>November</td></tr><tr><td id="1105" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>December</td></tr></table></div><div id="06menu" class="monthMenu"><table class="monthTable"><tr><td id="006" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>January</td></tr><tr><td id="106" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>February</td></tr><tr><td id="206" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>March</td></tr><tr><td id="306" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>April</td></tr><tr><td id="406" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>May</td></tr><tr><td id="506" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>June</td></tr><tr><td id="606" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>July</td></tr><tr><td id="706" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>August</td></tr><tr><td id="806" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>September</td></tr><tr><td id="906" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>October</td></tr><tr><td id="1006" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>November</td></tr><tr><td id="1106" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>December</td></tr></table></div><div id="07menu" class="monthMenu"><table class="monthTable"><tr><td id="007" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>January</td></tr><tr><td id="107" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>February</td></tr><tr><td id="207" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>March</td></tr><tr><td id="307" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>April</td></tr><tr><td id="407" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>May</td></tr><tr><td id="507" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>June</td></tr><tr><td id="607" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>July</td></tr><tr><td id="707" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>August</td></tr><tr><td id="807" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>September</td></tr><tr><td id="907" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>October</td></tr><tr><td id="1007" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>November</td></tr><tr><td id="1107" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>December</td></tr></table></div><div id="08menu" class="monthMenu"><table class="monthTable"><tr><td id="008" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>January</td></tr><tr><td id="108" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>February</td></tr><tr><td id="208" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>March</td></tr><tr><td id="308" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>April</td></tr><tr><td id="408" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>May</td></tr><tr><td id="508" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>June</td></tr><tr><td id="608" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>July</td></tr><tr><td id="708" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>August</td></tr><tr><td id="908" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>October</td></tr><tr><td id="1008" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>November</td></tr><tr><td id="1108" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>December</td></tr></table></div></div>		</div>

Here's what I was thinking I needed to do, but this code breaks the sub-menu reveal. Am I on the right path? If so, what am I doing wrong?JS:

	<div id="archivesfield" onMouseOver="reveal('archivesyear')" onMouseOut="hide('archivesyear')"><img id="archives" src="pictures/button4.jpg" alt="Archives">		  <!-- Year Menu Builder -->	  <div id='archivesyearmenu'><table id='archivesyeartable'><tr><td id='05' onMouseOver='menuButtonOn(this), hideLastMenu, reveal("05");'  onMouseOut='menuButtonOff(this);'>2005</td></tr><tr><td id='06' onMouseOver='menuButtonOn(this), hideLastMenu, reveal("06");'  onMouseOut='menuButtonOff(this);'>2006</td></tr><tr><td id='07' onMouseOver='menuButtonOn(this), hideLastMenu, reveal("07");'  onMouseOut='menuButtonOff(this);'>2007</td></tr><tr><td id='08' onMouseOver='menuButtonOn(this), hideLastMenu, reveal("08");'  onMouseOut='menuButtonOff(this);'>2008</td></tr></table></div><div id='allMonthMenus'><div id="05menu" class="monthMenu"><table class="monthTable"><tr><td id="705" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>August</td></tr><tr><td id="805" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>September</td></tr><tr><td id="905" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>October</td></tr><tr><td id="1005" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>November</td></tr><tr><td id="1105" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>December</td></tr></table></div><div id="06menu" class="monthMenu"><table class="monthTable"><tr><td id="006" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>January</td></tr><tr><td id="106" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>February</td></tr><tr><td id="206" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>March</td></tr><tr><td id="306" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>April</td></tr><tr><td id="406" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>May</td></tr><tr><td id="506" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>June</td></tr><tr><td id="606" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>July</td></tr><tr><td id="706" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>August</td></tr><tr><td id="806" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>September</td></tr><tr><td id="906" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>October</td></tr><tr><td id="1006" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>November</td></tr><tr><td id="1106" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>December</td></tr></table></div><div id="07menu" class="monthMenu"><table class="monthTable"><tr><td id="007" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>January</td></tr><tr><td id="107" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>February</td></tr><tr><td id="207" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>March</td></tr><tr><td id="307" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>April</td></tr><tr><td id="407" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>May</td></tr><tr><td id="507" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>June</td></tr><tr><td id="607" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>July</td></tr><tr><td id="707" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>August</td></tr><tr><td id="807" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>September</td></tr><tr><td id="907" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>October</td></tr><tr><td id="1007" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>November</td></tr><tr><td id="1107" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>December</td></tr></table></div><div id="08menu" class="monthMenu"><table class="monthTable"><tr><td id="008" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>January</td></tr><tr><td id="108" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>February</td></tr><tr><td id="208" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>March</td></tr><tr><td id="308" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>April</td></tr><tr><td id="408" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>May</td></tr><tr><td id="508" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>June</td></tr><tr><td id="608" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>July</td></tr><tr><td id="708" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>August</td></tr><tr><td id="908" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>October</td></tr><tr><td id="1008" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>November</td></tr><tr><td id="1108" onMouseOver='menuButtonOn(this);' onMouseOut='menuButtonOff(this);'>December</td></tr></table></div></div>		</div>

[justsomeguy]

If the margins are the problem, you might want to have your div that contains the menu be a div with no margin and no padding, and inside that you can add another div with whatever margin and padding you want, or just apply margin and padding to the table.

[Renegade605]

You could put the second sub-menu inside the first and use position:absolute; so that it would still count as part of the menu.PseudoCode

<div><link 1 onmouseover="showsubmenu1" /><submenu1>  <sublink1>Text</sublink1>  <sublink2 onmouseover="showsubsubmenu">Text	<subsubmenu style="position:absolute;">	  <subsublink1>Text</subsublink1>	  <subsublink2>Text</subsublink2>	</subsubmenu>  </sublink2></submenu1></div>