html横向树目录

来源：互联网发布：java会议室预定系统编辑：程序博客网时间：2024/04/30 07:59
<html> <head> <style type="text/css"> <!-- #Layer1 { position:absolute; width:140px; height:116px; z-index:1; left: 12px; top: 43px; } #Layer2 { position:absolute; width:100px; height:115px; left: 161px; top: 43px; z-index:1; } #Layer3 { position:absolute; width:100px; height:115px; left: 267px; top: 43px; z-index:1; } --> </style> </head> <script language="JavaScript"> function aa1() { if(Layer1.style.display=="none") { Layer1.style.display="block"; }else{Layer1.style.display="none"; }}function aa2() { if(Layer2.style.display=="none") { Layer2.style.display="block"; }else{ Layer2.style.display="none"; }}function aa3() { if(Layer3.style.display=="none") { Layer3.style.display="block"; }else{ Layer3.style.display="none"; }}</script> <body> <table bgcolor="#66FFCC" border="1"> <tr> <td width="140" align="center"><a href="#" id="d1" onMouseDown="aa1()">主菜单一</a></td> <td width="100"><a href="#" id="d2" onMouseDown="aa2()">主菜单二</a></td> <td width="100"><a href="#" id="d3" onMouseDown="aa3()">主菜单三</a></td> </tr> </table> <div id="Layer1" style="display:none"> <table bgcolor="#FFFF00" width="140"> <tr><td align="center">主菜单一</td></tr> <tr><td align="center">主菜单一</td></tr> <tr><td align="center">主菜单一</td></tr> </table> </div> <div id="Layer2" style="display:none"> <table bgcolor="#FFFF00"> <tr><td>子菜单二</td></tr> <tr><td>子菜单二</td></tr> </table> </div> <div id="Layer3" style="display:none"> <table bgcolor="#FFFF00"> <tr><td>子菜单三</td></tr> <tr><td>子菜单三</td></tr> </table> </div> </body> </html>
1 0