Member Avatar for kahaj

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>...
  • 2 Contributors
  • 4 Replies
  • 108 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by rjpaje
Member Avatar for kahaj

Nevermind, found my own syntax error. :)

Member Avatar for rjpaje

nice...care to share the bug?

Member Avatar for kahaj

Sure.

I got in a hurry and had:

...<style type="text/css" table.noShow {visibility:hidden; position:absolute }>

instead of:

...<style type="text/css">
table.noShow {visibility:hidden; position:absolute }
</style>
Member Avatar for rjpaje

hahaha,..nice...thanks for sharing...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.