Suong Tu
Reputation: 11
trying to create submenus
Editing for revision, as you can see the menu and its submenu is hiding behind the banner or picture
Is there something wrong with the code? as it only appears on firefox, all the other web browsers i.e Safari, Chrome, IE and Opera work well
<BODY ONSELECTSTART="return false;" BGCOLOR="#FFFFFF" TEXT="#000000">
<table border="0" align="center" width="800">
<tr>
<td align="left" width="200"><a href="index.html"><img
src="images/logo1.gif" width="135" height="57" border="0"></a></td>
<td width="399" align="right"><img src="images/medical_innovations.gif"
width="335" height="60"></td>
<td align="right" width="187"><div class="body"><b>Tel: 1-905-475-2380<br>
Toll Free: 1-877-50KOSIM<br />Fax: 905-475-2303<br />
email: <a href="email_sales.php">[email protected]</a></b></div></td>
</tr>
</table>
<table align="center" width="800" bgcolor="EDF0F7" cellspacing="0"
cellpadding="0">
<tr>
<td width="86" height="25"></td>
<td width="2"><img src="images/spacer.jpg"></td>
<td align="center" width="46"><a href="index.html"
onMouseOver="movr(1);return true;" onMouseOut="mout(1);return true;"
onClick="return true;"><img name=img1 border=0
src="images/link_off_home.jpg"></a></td>
<td width="2"><img src="images/spacer.jpg"></td>
<td align="center" width="63"><a href="products/index.html"
onMouseOver="movr(2);return true;" onMouseOut="mout(2);return true;"
onClick="return true;"><img name=img2 border=0
src="images/link_off_products.jpg"></a></td>
<td width="2"><img src="images/spacer.jpg"></td>
<td align="center" width="66"><a href="about.html"
onMouseOver="movr(3);return true;" onMouseOut="mout(3);return true;"
onClick="return true;"><img name=img3 border=0
src="images/link_off_about.jpg"></a></td>
<td width="2"><img src="images/spacer.jpg"></td>
<td align="center" width="99"><a href="events.html"
onMouseOver="movr(4);return true;" onMouseOut="mout(4);return true;"
onClick="return true;"><img name=img4 border=0
src="images/link_off_events.jpg"> </a> </td>
<td width="10"><img src="images/spacer.jpg"></td>
<td align="center" width="111"><a href="customer_service.html"
onMouseOver="movr(5);return true;" onMouseOut="mout(5);return true;"
onClick="return true;"><img name=img5 border=0
src="images/link_off_cs.jpg"></a></td>
<td width="10"><img src="images/spacer.jpg"></td>
<td align="center" width="73"><a href="contact_us.html"
onMouseOver="movr(6);return true;" onMouseOut="mout(6);return true;"
onClick="return true;"><img name=img6 border=0
src="images/link_off_contact.jpg"></a></td>
<td width="90"><img src="images/spacer.jpg"></td>
<td width="136"></td>
</tr>
</table>
<table align="center" width="800" border="0" cellpadding="0"
cellspacing="0">
<tr>
<td valign="top" bgcolor="EDF0F7">
<!-- side bar - products -->
<table width="175" height="494" border="0" align="center" cellpadding="3"
cellspacing="0" style="border: 1px solid #ADBCDB">
<tr>
<td width="167" height="24" align="center" bgcolor="DDDDDD"><font
face="arial" size="2" color="000000"><b>Products</b></td>
</tr>
<tr bgcolor="#EDF0F7" onMouseOver="this.bgColor='FFFFFF';"
onMouseOut="this.bgColor='#EDF0F7';">
<td height="23" valign="middle">
<ul>
<li>
<label for="acu">Acupuncture</label>
<input id="acu" type="checkbox">
<ul>
<li><a href="http://kosim.ca/products/needles.html">Needles</a></li>
<li><a href="http://kosim.ca/products/acu_models.html">Acupuncture Models</a></li>
<li><a href="http://kosim.ca/products/electro-therapeutic_devices.html">Electro-Therapeutic Devices</a></li>
<li><a href="http://kosim.ca/products/others.html">Cupping & Tools</a>
</li>
<li><a href="http://kosim.ca/products/books.html">Books</a></li>
</ul>
</ul>
<ul>
<li>
<label for="ana">Anatomical</label>
<input id="ana" type="checkbox">
<ul>
<li><a href="products/charts.html">Charts</a>
<li><a href="products/models_series_1.html">Model 1</a></li>
<li><a href="products/models_series_2.html">Model 2</a></li>
<li><a href="products/models_series_3.html">Model 3</a></li>
</ul>
</li>
</ul>
<ul>
<li>
<label for="Clinical">Clinical Supplies</label>
<input id="Clinical" type="checkbox">
<ul>
<a href="http://kosim.ca/products/clinic_supplies.html">Clinic Supplies</a>
</li>
</ul>
</ul>
<ul>
<li>
<label for="Diag">Diagnostic Equipment</label>
<input id="Diag" type="checkbox">
<ul>
<li><a href="http://kosim.ca/products/hand_evaluation.html">Hand
Evaluation</a></li>
<li><a href="http://kosim.ca/products/rom_measurement.html">Range of
Motion</a></li>
<li><a href="http://kosim.ca/products/diagnostic_equip.html">Adjusting
& Diagnostic</a></li>
</ul>
<tr bgcolor="#EDF0F7" onMouseOver="this.bgColor='FFFFFF';"
onMouseOut="this.bgColor='#EDF0F7';">
<td height="23" align="center" valign="middle" bgcolor="#D6D6D6"><a
href="monthly_specials.html" target="_blank" class="special" style="text-
decoration:none"><b><em>Monthly Special!</em></b></a></td>
</tr>
<tr></tr>
</table>
<table width="99%">
<tr>
<td height="0" align="left" valign="middle"> </td>
</tr>
<tr>
<td align="center"><br><a href="order_form.php"><img
src="images/howtoorder.jpg"
width="78" height="95" border="0"></a></td>
</tr>
<tr>
<td align="center"><br>
</td>
</tr>
</table></td>
<td width="620" align="center" valign="top">
<!-- body -->
<script src="bookmark.js" type="text/javascript"></script>
<script src='prototype.js' type='text/javascript'></script>
<script src='effects.js' type='text/javascript'></script>
<script src='rotatingbanner.js' type='text/javascript'></script>
<TABLE width="501" cellspacing="1" cellpadding="0" border="0">
<TR>
<TD valign="top"><div id='rotational-banner-container' style='height:
323px;'>
<div id='progress-bar' style='padding-top: 130px; padding-left:0;' >
<center><img src="images/blue-spoke.gif"></center></div>
<div id='rotational-banner' style='display:none;' >
<div><a href="about.html"><img src="images/rotate_banner_1.jpg" width="590"
height="300" border="0"></a></div>
<div><a href="products/chiropractic_tables.html"><img src="images/banner-
CHIROPRACTIC.jpg" width="590" height="300" border="0"></a></div>
<div><a href="products/laser_therapy.html"><img src="images/banner-
LASER.jpg"
width="590" height="300" border="0"></a></div>
<div><a href="products/massage_therapy.html"><img src="images/banner-
MASSAGE.jpg" width="590" height="300" border="0"></a></div>
<div><a href="products/hi-lo.html"><img src="images/banner-
PHYSIOTHERAPY.jpg"
width="590" height="300" border="0"></a></div>
<div><a href="products/exercise_rehab.html"><img src="images/banner-
EXERCISE.jpg" width="590" height="300" border="0"></a></div>
<div><a href="products/clinic_supplies.html"><img src="images/Strength-
Tape_Banner_2.jpg" width="590" height="300" border="0"></a></div>
<div><a href="products/pillows.html#30-5001"><img
src="images/rotate_banner_2.jpg" width="590" height="300" border="0"></a>
</div>
<div><a href="monthly_specials.html"><img src="images/rotate_banner_3.jpg"
width="590" height="300" border="0"></a></div>
</div>
</TD></TR>
</table>
<table>
<tr><td></td></tr>
Upvotes: 0
Views: 49
Answers (2)
Michael Coker
Reputation: 53674
Doing this with pure CSS, you can use the "checkbox hack". Just tie a label to an input[type="checkbox"] via the for attribute, and show the menu when the input is :checked. You'll also probably want to style the links and the label the same.
li > ul, ul input[type="checkbox"] {
display: none;
}
ul input[type="checkbox"]:checked + ul {
display: block;
}
ul a, ul label {
color: blue;
text-decoration: underline;
cursor: pointer;
}<ul>
<li>
<label for="acu">acupuncture</label>
<input id="acu" type="checkbox">
<ul>
<li><a href="http://kosim.ca/products/needles.html">Needles</a></li>
<li><a href="http://kosim.ca/products/acu_models.html">Acupuncture Models</a></li>
<li><a href="http://kosim.ca/products/electro-therapeutic_devices.html">Electro-Therapeutic Devices</a></li>
<li><a href="http://kosim.ca/products/others.html">Cupping & Tools</a>
</li>
<li><a href="http://kosim.ca/products/books.html">Books</a></li>
</ul>Upvotes: 1
Chris
Reputation: 141
Yes there is a way using css
li > ul {
display: none;
}
li:active > ul {
display: block;
}
This would work without using jquery.
Upvotes: 0