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

    <!DOCTYPE html>
    <html>
     <head>
      <meta charset="utf-8" />
      <title></title>
      <style type="text/css">
       *{margin:0;padding:0;}
       #nav{background-color: #eee;height:40px;600px;margin:0 auto;}
       ul{list-style: none;}
       ul li{float:left;line-height: 40px;text-align: center;position:relative;}
       a{text-decoration: none;color: #000;display: block;padding: 0 10px;}
       a:hover{color:#fff; background-color: #666;}
       ul li ul li{float: none;background-color: #eee;margin-top:2px;}
       ul li ul{position:absolute;left:0;top:40px;display:none}
       ul li ul li a:hover{background-color: blue;}
      
      </style>
     </head>
     <body>
      <div id="nav">
       <ul >
        <li><a href="#">首页</a></li>
        <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">课程大厅</a>
         <ul>
          <li><a href="#">javascript</a></li>
          <li><a href="#">jquery</a></li>
         </ul>
        </li>
        <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">学习中心</a>
         <ul>
          <li><a href="#">视频学习</a></li>
          <li><a href="#">案例分析</a></li>
          <li><a href="#">交流平台</a></li>
         </ul>
        </li>
        <li><a href="#">经典案例</a></li>
        <li><a href="#">关于我们</a></li>
       </ul>
      </div>
      <script type="text/javascript">
       function show(li){
        var submeu=li.getElementsByTagName("ul")[0];
        submeu.style.display="block";
       }
       function hide(li){
        var submeu=li.getElementsByTagName("ul")[0];
        submeu.style.display="none";
       }
      </script>
     </body>
    </html>

  • 相关阅读:
    concurrent.futures
    HTTP协议
    Web框架原理
    Docker从入门到实战应用
    Mac Homebrew超坑爹的地方
    第6章-7.找出总分最高的学生 (15分)
    第6章-6.求指定层的元素个数 (40分)
    第6章-5.列表元素个数的加权和(1) (40分)
    第6章-4.列表数字元素加权和(1) (40分)
    第6章-3.列表或元组的数字元素求和 (20分)
  • 原文地址:https://www.cnblogs.com/xiaoqianliu/p/8555161.html
Copyright © 2011-2022 走看看