Tip: you can modify some code before running
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Webpage special effects-navigation menu-simple imitation QQ drop-down menu</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><!--把下面代码加到<head>与</head>之间--><style type="text/css">. Hide {display: none;}. show {display: block;}. pointer {cursor: pointer ;}</style></head><body><!--把下面代码加到<body>与</body>之间--><table id="menu" width="200" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#000"><!--Begin #--> <tr class="pointer" onclick="Menu(this);"> <td height="28" align="center"> <table width="150" border="0" cellpadding="0" cellspacing="0"> <tr align="center"> <td>Menu 1</td> </tr> </table> </td> </tr> <tr class="show"> <td align="center" valign="top"> <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center">Menu 1 content 1</td> </tr><tr> <td align="center">Menu 1 content 2</td> </tr> </table> </td> </tr><!--End #--><!--Begin #--> <tr class="pointer" onclick="Menu(this);"> <td align="center"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr align="center"> <td>Menu 2</td> </tr> </table> </td> </tr> <tr class="hide"> <td align="center" valign="top"> <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center">Menu 2 content 1</td> </tr><tr> <td align="center">Menu 2 content 2</td> </tr> </table> </td> </tr><!--End #--><!--Begin #--> <tr class="pointer" onclick="Menu(this);"> <td align="center" > <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr align="center"> <td>Menu 3</td> </tr> </table> </td> </tr> <tr class="hide"> <td align="center" valign="top"> <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center">Menu 3 content 1</td> </tr><tr> <td align="center">Menu 3 content 2</td> </tr> </table> </td> </tr><!--End #--><!--Begin #--> <tr class="pointer" onclick="Menu(this);"> <td align="center"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr align="center"> <td>Menu 4</td> </tr> </table> </td> </tr> <tr class="hide"> <td align="center" valign="top"> <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center">Menu 4 content 1</td> </tr><tr> <td align="center">Menu 4 content 2</td> </tr> </table> </td> </tr><!--End #--></table> <script language="javascript">Function Menu (obj) {var tb = document. getElementById ("menu"); for (I = 0; I <8; I ++) {if (I % 2 = 1) {tb. rows [I]. className = "hide" ;}} if (obj. className = "pointer") {if (tb. rows (obj. rowIndex + 1 ). className = "show") {tb. rows (obj. rowIndex + 1 ). className = "hide";} else {tb. rows (obj. rowIndex + 1 ). className = "show ";}}}</script></body></html>
Tip: you can modify some code before running