Submenu on hover/mouseover not working

[bwallace]

Hi everyone,

I see a thread here that may help, but as with the code I am using it doesn't help with designing a submenu for each item on our site menu. When you visit this page, there are three problems with the left menu:

(1) The only submenu that shows when you hover over anything on the left menu is the one for the first category.
(2) The main category on the left menu enlarges when the submenu appears.
(3) The links on the submenu all go to the URL for the main category on the left menu.

Here's the code:

<table class="classC" width="100%">
<script language="javascript" type="text/javascript">
function subMenu(show) {
if (show){
document.getElementById('sub_menu').style.display='block';
document.getElementById('sub_menu').style.position='relative';
document.getElementById('sub_menu').style.left='175px';
document.getElementById('sub_menu').style.bottom='30px';
} else {
document.getElementById('sub_menu').style.display = 'none';
}
}
</script>
<tr><td class="classA" valign="middle">Advice Topics</td></tr>

<tr><td class="classB" valign="middle" onmouseover="javascript:subMenu(true)" onmouseout="javascript:subMenu(false)" onclick="window.location.href='http://home.naturalfrugality.com/'">&nbsp;&nbsp;&nbsp;Home & Garden
<div style="display:none" id="sub_menu" onmouseover="javascript:subMenu(true);" onmouseout="javascript:subMenu(false);">
<table class="classC" style="font-size:small; right:100px">
<tr><td class="classB" valign="middle" onclick="window.location.href='http://home.naturalfrugality.com/home.php'">Decorating</a></td></tr>
<tr><td class="classB" valign="middle" onclick="window.location.href='http://home.naturalfrugality.com/cleaning-and-maintenance.php'">Cleaning & Maintenance</a></td></tr>
<tr><td class="classB" valign="middle" onclick="window.location.href='http://home.naturalfrugality.com/home.php'">Apartment & City Living</a></td></tr>
<tr><td class="classB" valign="middle" onclick="window.location.href='http://home.naturalfrugality.com/home.php'">Gardening</a></td></tr>
<tr><td class="classB" valign="middle" onclick="window.location.href='http://home.naturalfrugality.com/home.php'">Moving</a></td></tr>
</table></div>
</td></tr>

<tr><td class="classB" valign="middle" onmouseover="javascript:subMenu(true)" onmouseout="javascript:subMenu(false)" onclick="window.location.href='http://food.naturalfrugality.com/'">&nbsp;&nbsp;&nbsp;Food
<div style="display:none" id="sub_menu" onmouseover="javascript:subMenu(true);" onmouseout="javascript:subMenu(false);">
<table class="classC" style="font-size:small; right:100px">
<tr><td class="classB" valign="middle" onclick="window.location.href='http://food.naturalfrugality.com/home.php'">Kitchen Help</a></td></tr>
<tr><td class="classB" valign="middle" onclick="window.location.href='http://food.naturalfrugality.com/food-shopping-and-restaurants.php'">Food Shopping & Restaurants</a></td></tr>
<tr><td class="classB" valign="middle" onclick="window.location.href='http://food.naturalfrugality.com/recipes.php'">Recipes</a></td></tr>
</table></div>
</td></tr>

<tr><td class="classB" valign="middle" onmouseover="javascript:subMenu(true)" onmouseout="javascript:subMenu(false)" onclick="window.location.href='http://people.naturalfrugality.com/'">&nbsp;&nbsp;&nbsp;Family &<br>&nbsp;&nbsp;&nbsp;Relationships
<div style="display:none" id="sub_menu" onmouseover="javascript:subMenu(true);" onmouseout="javascript:subMenu(false);">
<table class="classC" style="font-size:small; right:100px">
<tr><td class="classB" valign="middle" onclick="window.location.href='http://people.naturalfrugality.com/home.php'">Marriage</a></td></tr>
<tr><td class="classB" valign="middle" onclick="window.location.href='http://people.naturalfrugality.com/kids.php'">Kids</a></td></tr>
<tr><td class="classB" valign="middle" onclick="window.location.href='http://people.naturalfrugality.com/home.php'">Holidays</a></td></tr>
<tr><td class="classB" valign="middle" onclick="window.location.href='http://people.naturalfrugality.com/fun.php'">Fun</a></td></tr>
<tr><td class="classB" valign="middle" onclick="window.location.href='http://people.naturalfrugality.com/home.php'">Pets</a></td></tr>
</table></div>
</td></tr>

<tr><td class="classB" valign="middle" onmouseover="javascript:subMenu(true)" onmouseout="javascript:subMenu(false)" onclick="window.location.href='http://health.naturalfrugality.com/'">&nbsp;&nbsp;&nbsp;Health
<div style="display:none" id="sub_menu" onmouseover="javascript:subMenu(true);" onmouseout="javascript:subMenu(false);">
<table class="classC" style="font-size:small; right:100px">
<tr><td class="classB" valign="middle" onclick="window.location.href='http://home.naturalfrugality.com/home.php'">Decorating</a></td></tr>
<tr><td class="classB" valign="middle" onclick="window.location.href='http://home.naturalfrugality.com/home.php'">Cleaning & Maintenance</a></td></tr>
<tr><td class="classB" valign="middle" onclick="window.location.href='http://home.naturalfrugality.com/home.php'">Apartment & City Living</a></td></tr>
<tr><td class="classB" valign="middle" onclick="window.location.href='http://home.naturalfrugality.com/home.php'">Gardening</a></td></tr>
<tr><td class="classB" valign="middle" onclick="window.location.href='http://home.naturalfrugality.com/home.php'">Moving</a></td></tr>
</table></div>
</td></tr>

<tr><td class="classB" valign="middle" onmouseover="javascript:subMenu(true)" onmouseout="javascript:subMenu(false)" onclick="window.location.href='http://style.naturalfrugality.com/'">&nbsp;&nbsp;&nbsp;Beauty & Style
<div style="display:none" id="sub_menu" onmouseover="javascript:subMenu(true);" onmouseout="javascript:subMenu(false);">
<table class="classC" style="font-size:small; right:100px">
<tr><td class="classB" valign="middle" onclick="window.location.href='http://health.naturalfrugality.com/fitness-and-weight-management.php'">Fitness & Weight Management</a></td></tr>
<tr><td class="classB" valign="middle" onclick="window.location.href='http://health.naturalfrugality.com/home.php'">Illness Prevention & Remedies</a></td></tr>
<tr><td class="classB" valign="middle" onclick="window.location.href='http://health.naturalfrugality.com/home.php'">Men's Health</a></td></tr>
<tr><td class="classB" valign="middle" onclick="window.location.href='http://health.naturalfrugality.com/home.php'">Women's Health</a></td></tr>
</table></div>
</td></tr>

<tr><td class="classB" valign="middle" onmouseover="javascript:subMenu(true)" onmouseout="javascript:subMenu(false)" onclick="window.location.href='http://travel.naturalfrugality.com/'">&nbsp;&nbsp;&nbsp;Travel
<div style="display:none" id="sub_menu" onmouseover="javascript:subMenu(true);" onmouseout="javascript:subMenu(false);">
<table class="classC" style="font-size:small; right:100px">
<tr><td class="classB" valign="middle" onclick="window.location.href='http://travel.naturalfrugality.com/home.php'">Auto Maintenance & Repair</a></td></tr>
<tr><td class="classB" valign="middle" onclick="window.location.href='http://travel.naturalfrugality.com/home.php'">Trips & Vacation</a></td></tr>
<tr><td class="classB" valign="middle" onclick="window.location.href='http://travel.naturalfrugality.com/home.php'">Buying & Selling a Vehicle</a></td></tr>
</table></div>
</td></tr>

<tr><td class="classB" valign="middle" onmouseover="javascript:subMenu(true)" onmouseout="javascript:subMenu(false)" onclick="window.location.href='http://money.naturalfrugality.com/'">&nbsp;&nbsp;&nbsp;Finances
<div style="display:none" id="sub_menu" onmouseover="javascript:subMenu(true);" onmouseout="javascript:subMenu(false);">
<table class="classC" style="font-size:small; right:100px">
<tr><td class="classB" valign="middle" onclick="window.location.href='http://money.naturalfrugality.com/home.php'">Free Stuff</a></td></tr>
<tr><td class="classB" valign="middle" onclick="window.location.href='http://money.naturalfrugality.com/saving-money.php'">Saving Money</a></td></tr>
<tr><td class="classB" valign="middle" onclick="window.location.href='http://money.naturalfrugality.com/home.php'">Debt</a></td></tr>
<tr><td class="classB" valign="middle" onclick="window.location.href='http://money.naturalfrugality.com/home.php'">Career and Education</a></td></tr>
</table></div>
</td></tr>
</table>

Please help!

[Kraai]

Hi, I did not go over your whole code, but can give you some general pointers:

1. The links in the submenu all go to the homepage, because that is the way they are currently linked:

For example, this:

<table class="seen2" style="font-size:small; right:100px">
<tr><td class="tpx2" valign="middle" onclick="window.location.href='http://home.naturalfrugality.com/home.php'">Decorating</a></td></tr>

Should be something like this:

<table class="seen2" style="font-size:small; right:100px">
<tr><td class="tpx2" valign="middle" onclick="window.location.href='http://home.naturalfrugality.com/decorating.php'">Decorating</a></td></tr>

But there may be some other mistakes as well, I see in above code you end of </a> without opening <a> anywhere, and so on.

You should look carefully over your code, as well as the linked stylesheet, to rectify the problems.

[bwallace]

Thanks, Kraai, I forgot to mention that some of the links were dummy links until those pages exist. We figured out a way to fix it though. We moved the submenus from the left menu table and made them divs below the table. Then we adjusted the relative position of each submenu to make them appear beside the left menu.

[Kraai]

Good stuff, glad you came right!