所谓横向菜单就是有三个标题栏,当鼠标移到那个标题就显示下级菜单,其他隐藏。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ ...
所谓横向菜单就是有三个标题栏,当鼠标移到那个标题就显示下级菜单,其他隐藏。
<!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>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com
原标题:制作横向菜单
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。