所谓横向菜单就是有三个标题栏，当鼠标移到那个标题就显示下级菜单，其他隐藏。
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>横向菜单</title> <style type="text/css"> td {font-size: 13px; color: #000000; line-height: 22px;} div{ /*设置层背景样式*/ background-color:#669933; text-align:center; display:none; } a {font-size: 16px; color: #FFFFFF; text-decoration: none; /*文字链接的背影样式*/ background-color:#669933; 100px; line-height:22px; text-align:center; } a:hover {font-size: 13px; color: #ffffff; /*鼠标在文字链接上时的文字背景样式*/ background-color:#FE9D01; 200px; line-height:22px; text-align:center; } </style> <script language="JavaScript"> function show(d1){ document.getElementById(d1).style.display='block'; //显示层 } function hide(d1){ document.getElementById(d1).style.display='none'; } </script> </head> <body> <table width="220" style="border:1px solid red;background:#fff" cellspacing="0" cellpadding="0" align="center"> <tr> <td><a onMouseMove="show(1)" onMouseOut="hide(1)">手机数码</a></td> <td><a onMouseMove="show(2)" onMouseOut="hide(2)">淘宝集市</a></td> <td><a onMouseMove="show(3)" onMouseOut="hide(3)">品牌商城</a></td> </tr> <tr> <td> <div id="1" > 手机数码1<br/> 手机数码2<br/> 手机数码3 </div> </td> <td> <div id="2" > 淘宝集市1<br/> 淘宝集市2<br/> 淘宝集市3 </div> </td> <td> <div id="3"> 品牌商城1<br/> 品牌商城2<br/> 品牌商城3 </div> </td> </tr> </table> </body> </html>