制作横向菜单

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

<!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;    
           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" 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>

 

posted on 2015-05-24 17:26  梦之航  阅读(632)  评论(0)  编辑  收藏  举报

导航