<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>下拉菜单</title> <style type="text/css"> div{ display:none;} ul{ margin-left:-30px; list-style-type:none; margin-top:0px; } li{ 80px; background-color:#CCCCCC; text-align:center; display:block; padding:4px 0px 2px 0px; } li a{ text-decoration:none; color:#666; padding:4px 0px 2px 0px; } li a:hover{ color:#00F; display:block; background-color:#FFFF00; border-style:solid; border-color:#009900; border-2px; } span a:hover{ color:#FF0; } span a{ text-decoration:none; } </style> <script language="javascript" type="text/javascript"> function show(num){ document.getElementById(num).style.display="block"; } function hidden1(num){ document.getElementById(num).style.display="none"; } </script> </head> <body> <table border="0"> <tr> <td width="110px"onmousemove="show(1)" onmouseout="hidden1(1)" bgcolor="#FF99CC"><span><a href="#">第一组</a></span></td> <td width="110px"onmousemove="show(2)" onmouseout="hidden1(2)" bgcolor="#FF99CC"><span><a href="#">第二组</a></span></td> <td width="110px"onmousemove="show(3)" onmouseout="hidden1(3)"bgcolor="#FF99CC"><span><a href="#">第三组</a></span></td> <td width="110px"onmousemove="show(4)" onmouseout="hidden1(4)"bgcolor="#FF99CC"><span><a href="#">第四组</a></span></td> </tr> <tr> <td onmousemove="show(1)" onmouseout="hidden1(1)"> <div id="1"> <ul> <li><a href="#">斗破苍穹</a></li> <li><a href="#">盘龙</a></li> <li><a href="#">舞动乾坤</a></li> <li><a href="#">大主宰</a></li> </ul> </div> </td> <td onmousemove="show(2)" onmouseout="hidden1(2)"> <div id="2"> <ul> <li><a href="#">仙人一只花</a></li> <li><a href="#">佛挡杀佛</a></li> <li><a href="#">主宰一切</a></li> <li><a href="#">唯我独尊</a></li> </ul> </div> </td> <td onmousemove="show(3)" onmouseout="hidden1(3)"> <div id="3"> <ul> <li><a href="#">命运时之门</a></li> <li><a href="#">刀剑神域</a></li> <li><a href="#">滑头鬼之孙</a></li> <li><a href="#">fate stay night</a></li> </ul> </div> </td> <td onmousemove="show(4)" onmouseout="hidden1(4)"> <div id="4"> <ul> <li><a href="#">360</a></li> <li><a href="#">IE</a></li> <li><a href="#">火狐</a></li> <li><a href="#">谷歌</a></li> </ul> </div> </td> </tr> </table> </body> </html>