服务热线:13616026886

技术文档 欢迎使用技术文档,我们为你提供从新手到专业开发者的所有资源,你也可以通过它日益精进

位置:首页 > 技术文档 > JAVA > 新手入门 > 基础入门 > 查看文档

一个很通用的javascript的下拉菜单

这是css文件css.css的内容

.close{
  visibility:hidden;
  cellpadding=0; cellspacing=0 ;
  height:21px;font:9pt;text-align:center
 
   }
.open{
  visibility:visible;
  cellpadding=0; cellspacing=0 ;
  height:24px;font:9pt;text-align:center;
  border-top: #000000 1px solid;
  border-bottom: #000000 1px solid

   }
.openleft{
  visibility:visible;
  cellpadding=0; cellspacing=0 ;
  height:24px;font:9pt;text-align:center;
  border-top: #000000 1px solid;
  border-left:#000000 1px solid ;
  border-bottom: #000000 1px solid
  }
.openright{
  visibility:visible;
  cellpadding=0; cellspacing=0 ;
  height:24px;font:9pt;text-align:center;
  border-top: #000000 1px solid ;
  border-right:#000000 1px solid ;
  border-bottom: #000000 1px solid
  }

利用鼠标对象和表格的属性很容易实现下拉菜单!

<html><head><title>最后还是笑笑/情感</title>
<meta http-equiv=content-type content="text/html; charset=gb2312">
<link href="cssfiles/css.css"  type=text/css rel=stylesheet>
<body bgcolor=#dedfde leftmargin=0 marginwidth="0" topmargin="0">

<table width="80%"  align="center" cellpadding=0 cellspacing=0  id="thelast" class=bian>
  
    <tr  height="67">
   <td valign="top" width="9%" align=center >
   <table width="100%" class=close 
     onmouseout="this.style.visibility='hidden'";
     onmouseover="this.style.visibility='visible'" cellpadding="0" cellspacing="0">
     <tr>
     <td valign="center" title="本人本站的介绍" background="http://www.itus.cnpic/back.jpg" height=23 class=openleft><a href='#'> 笑 笑</a></td>
     </tr>
              <tr>
       <td valign="center" background="http://www.itus.cnpic/back2.jpg"><a href="bzjs.html"  target="_blank">本 站</a></td>
     </tr>
     <tr>
       <td valign="center" background="http://www.itus.cnpic/back2.jpg"><a href="grjj.html"  target="_blank">本 人</a></td>
     </tr>
     <tr>
       <td valign="center" background="http://www.itus.cnpic/back2.jpg"><a href="jl.html"  target="_blank">简 历</a></td>
     </tr>    
     </table>

</td></tr>

</table>

</body>

</html>


扫描关注微信公众号