zoukankan      html  css  js  c++  java
  • 下拉菜单

    <!doctype html>
     <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
    <title>下拉菜单</title>
    <style type="text/css">
    div{
    display:none;}
    ul{
    margin-left:-30px;
    list-style-type:none;
    margin-top:0px;
    }
    li{
    80px;
    background-color:#CCCCCC;
    text-align:center;
    display:block;
    padding:4px 0px 2px 0px;
    }
    li a{
    text-decoration:none;
    color:#666;
    padding:4px 0px 2px 0px;
    }
    li a:hover{
    color:#00F;
    display:block;
    background-color:#FFFF00;
    border-style:solid;
    border-color:#009900;
    border-2px;
    }
    span a:hover{
     color:#FF0;
     }
    span a{
     text-decoration:none;
     }
    </style>
    <script language="javascript" type="text/javascript">
    function show(num){
     document.getElementById(num).style.display="block";
    }
    function hidden1(num){
     document.getElementById(num).style.display="none";
    }
    </script>
    </head>
    <body>
    <table  border="0">
      <tr>
        <td width="110px"onmousemove="show(1)" onmouseout="hidden1(1)" bgcolor="#FF99CC"><span><a href="#">第一组</a></span></td>
        <td width="110px"onmousemove="show(2)" onmouseout="hidden1(2)" bgcolor="#FF99CC"><span><a href="#">第二组</a></span></td>
        <td width="110px"onmousemove="show(3)" onmouseout="hidden1(3)"bgcolor="#FF99CC"><span><a href="#">第三组</a></span></td>
        <td width="110px"onmousemove="show(4)" onmouseout="hidden1(4)"bgcolor="#FF99CC"><span><a href="#">第四组</a></span></td>
      </tr>
      <tr>
        <td onmousemove="show(1)" onmouseout="hidden1(1)">
     <div id="1">
      <ul>
       <li><a href="#">斗破苍穹</a></li>
       <li><a href="#">盘龙</a></li>
       <li><a href="#">舞动乾坤</a></li>
       <li><a href="#">大主宰</a></li>
      </ul>
     </div>
     </td>
        <td onmousemove="show(2)" onmouseout="hidden1(2)">
     <div id="2">
      <ul>
       <li><a href="#">仙人一只花</a></li>
       <li><a href="#">佛挡杀佛</a></li>
       <li><a href="#">主宰一切</a></li>
       <li><a href="#">唯我独尊</a></li>
      </ul>
     </div>
     </td>
        <td onmousemove="show(3)" onmouseout="hidden1(3)">
     <div id="3">
      <ul>
       <li><a href="#">命运时之门</a></li>
       <li><a href="#">刀剑神域</a></li>
       <li><a href="#">滑头鬼之孙</a></li>
       <li><a href="#">fate stay night</a></li>
      </ul>
     </div>
     </td>
        <td onmousemove="show(4)" onmouseout="hidden1(4)">
     <div id="4">
      <ul>
       <li><a href="#">360</a></li>
       <li><a href="#">IE</a></li>
       <li><a href="#">火狐</a></li>
       <li><a href="#">谷歌</a></li>
      </ul>
     </div>
     </td>
      </tr>
    </table>
    </body>
    </html>
  • 相关阅读:
    spring-boot-maven-plugin not found的解决方案
    springboot项目idea代码报红,maven clean, maven reimport都不起作用
    ubuntu升级python版本(3.5 -> 3.6)
    安卓时间戳转成时间存在误差
    litepal创建数据库表失败
    安卓实现标题和按钮在一行,按钮靠最右边布局
    idea2019设置智能提示忽略大小写
    PowerDesigner连接MySQL逆向生成PDM
    javaweb开发页面数字过长显示科学计数法的问题
    react native cannot read property 'navigate' of undefined
  • 原文地址:https://www.cnblogs.com/yaobolove/p/4703080.html
Copyright © 2011-2022 走看看