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/'"> 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/'"> 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/'"> Family &<br> 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/'"> 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/'"> 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/'"> 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/'"> 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!