Question

Editing for revision, as you can see the menu and its submenu is hiding behind the banner or picture
代码有问题吗？因为它只出现在Firefox上，所有其他网络浏览器，即Safari，Chrome，IE和Opera都运行良好

  <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">sales@kosim.ca</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">&nbsp;</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>

Answer 1

使用纯CSS执行此操作，您可以使用＆＃34;复选框hack＆＃34;。只需通过label属性将input[type="checkbox"]与for绑定，并在input为:checked时显示菜单。您也可能希望为链接和标签设置相同的样式。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

是的，有一种方法可以使用css

li > ul {
    display: none;
}
li:active > ul {
    display: block;
}

这可以在不使用jquery的情况下工作。

试图创建子菜单

2 个答案: