I'm trying to create a menu that only drops down when moused-over and collapses again on mouseout. It seems to be working fine except for one thing. When the page loads, it's automatically expanded in all five sections. Once the top image is moused over, it collapses and works properly. What am I missing here?
...<style type="text/css" table.noShow {visibility:hidden; position:absolute }>
<!--
body,td,th {
color: #AAAAAA;
}
body {
background-color: #000000;
}
-->
</style></head>
<body>
<div align="center">
<p><img src="assets/sweetRidesLogo2.jpg" alt="Welcome to Sweet Rides!" width="312" height="90" /></p>
</div>
<p align="center">
<table width="825" cellpadding="0" cellspacing="0">
<tr valign="top" align="left">
<td onmouseover="document.getElementById('aboutUs').style.visibility='visible';"
onmouseout="document.getElementById('aboutUs').style.visibility='hidden';">
<a href="" class="noDecor"><img src="assets/navbar/navbarAboutUs.jpg" border="0"></a><br />
<table class="noShow" id="aboutUs" width="100%">
<tr><td><a href="aboutUs/brands.html"><img src="assets/navbar/navbarBrands.jpg" border="0"></a></td></tr>
<tr><td><a href="aboutUs/contact.html"><img src="assets/navbar/navbarContactUs.jpg" border="0"></a></td></tr>
<tr><td><a href="aboutUs/gallery.html"><img src="assets/navbar/navbarGallery.jpg" border="0"></a></td></tr>
<tr><td><a href="aboutUs/guarantee.html"><img src="assets/navbar/navbarGuarantee.jpg" border="0"></a></td></tr>
<tr><td><a href="aboutUs/jobs.html"><img src="assets/navbar/navbarJobs.jpg" border="0"></a></td></tr>
</table>
</td>
<td onmouseover="document.getElementById('audio').style.visibility='visible';"
onmouseout="document.getElementById('audio').style.visibility='hidden';">
<a href="" class="noDecor"><img src="assets/navbar/navbarAudio.jpg" border="0"></a><br />
<table class="noShow" id="audio" width="100%">
<tr><td><a href="audioamps.html"><img src="assets/navbar/navbarAmplifiers.jpg" border="0"></a></td></tr>
<tr><td><a href="audio/boxes.html"><img src="assets/navbar/navbarBoxes.jpg" border="0"></a></td></tr>
<tr><td><a href="audio/cds.html"><img src="assets/navbar/navbarCD.jpg" border="0"></a></td></tr>
<tr><td><a href="audio/equalizers.html"><img src="assets/navbar/navbarEqualizers.jpg" border="0"></a></td></tr>
<tr><td><a href="audio/satellite.html"><img src="assets/navbar/navbarSatellite.jpg" border="0"></a></td></tr>
<tr><td><a href="audio/speakers.html"><img src="assets/navbar/navbarSpeakers.jpg" border="0"></a></td></tr>
<tr><td><a href="audio/subs.html"><img src="assets/navbar/navbarSubwoofers.jpg" border="0"></a></td></tr>
</table>
</td>
<td onmouseover="document.getElementById('remoteAccess').style.visibility='visible';"
onmouseout="document.getElementById('remoteAccess').style.visibility='hidden';">
<a href="" class="noDecor"><img src="assets/navbar/navbarRemoteAccess.jpg" border="0"></a><br />
<table class="noShow" id="remoteAccess" width="100%">
<tr><td><a href="remoteAccess/allInOne.html"><img src="assets/navbar/navbarSecurityAllInOne.jpg" border="0"></a></td></tr>
<tr><td><a href="remoteAccess/keyless.html"><img src="assets/navbar/navbarKeyless.jpg" border="0"></a></td></tr>
<tr><td><a href="remoteAccess/remoteStart.html"><img src="assets/navbar/navbarRemoteStart.jpg" border="0"></a></td></tr>
<tr><td><a href="remoteAccess/security.html"><img src="assets/navbar/navbarSecurity.jpg" border="0"></a></td></tr>
</table>
</td>
<td onmouseover="document.getElementById('video').style.visibility='visible';"
onmouseout="document.getElementById('video').style.visibility='hidden';">
<a href="" class="noDecor"><img src="assets/navbar/navbarVideo.jpg" border="0"></a><br />
<table class="noShow" id="video" width="100%">
<tr><td><a href="video/dvd.html"><img src="assets/navbar/navbarDVDPlayers.jpg" border="0"></a></td></tr>
<tr><td><a href="video/mobileNavigation.html"><img src="assets/navbar/navbarMobileNavigation.jpg" border="0"></a></td></tr>
<tr><td><a href="video/screens.html"><img src="assets/navbar/navbarVideoScreens.jpg" border="0"></a></td></tr>
</table>
</td>
<td onmouseover="document.getElementById('tint').style.visibility='visible';"
onmouseout="document.getElementById('tint').style.visibility='hidden';">
<a href="" class="noDecor"><img src="assets/navbar/navbarTinting.jpg" border="0"></a><br />
<table class="noShow" id="tint" width="100%">
<tr><td><a href="tint/legalInfo.html"><img src="assets/navbar/navbarLegalInfo.jpg" border="0"></a></td></tr>
<tr><td><a href="tint/tintPrice.html"><img src="assets/navbar/navbarPricing.jpg" border="0"></a></td></tr>
</table>...