你的位置:首页 > Java教程

[Java教程]制作横向菜单


所谓横向菜单就是有三个标题栏,当鼠标移到那个标题就显示下级菜单,其他隐藏。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html     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;        width:100px;      line-height:22px;      text-align:center;     }      a:hover {font-size: 13px;         color: #ffffff;       /*鼠标在文字链接上时的文字背景样式*/         background-color:#FE9D01;          width: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" 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>