html - 尝试创建子菜单

标签 html css

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>

最佳答案

使用纯 CSS 执行此操作，您可以使用“checkbox hack”。只需通过 for 属性将 label 绑定(bind)到 input[type="checkbox"] ，并在 input 时显示菜单 是 :checked。您可能还希望为链接和标签设置相同的样式。

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>

关于html - 尝试创建子菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44912736/

上一篇：css - 完全充满 map 的可变大小的 map 容器(最好在传单中)

下一篇：html - CSS - 使 div 的背景图像看起来与 HTML 页面的背景图像相同

相关文章：

css - 大写字符/单词的伪选择器？

css - 如何将 div 居中并使其围绕其中的 div 展开？

xaml - 是否有 XAML 的 * 单元的 CSS 等价物？

javascript - 如何从 iFrame 调用 Javascript 函数？

javascript - 为什么不能动态更改 css style.left 和 style.top 工作

css - 如何重置这些 CSS 样式？

HTML 表单对齐

html - 带有阴影的 CSS Div

javascript - 为什么我的外部 javascript 方法说它未定义？

jquery - Anything Slider - 使用不同尺寸的图像和字幕

©2024 IT工具网  联系我们