zoukankan      html  css  js  c++  java
  • 妙味课堂20160112js实例仿新浪菜单

      <ul>
        <li id="lis" class="lis">
          <a id = "link" href="#">微博</a>
          <ul id="ull">
            <li>私信</li>
            <li>评论</li>
            <li>@我</li>        
          </ul>
        </li>
        
      </ul>
    /*navigation*/
    li{
        list-style: none;
    }
    .lis{
    
        width: 80px;
        height: 30px;
        border: 1px solid #333;
        position: relative;
    }
    .lis a{
        display: block;
        line-height: 30px;
        text-align: center;
        text-decoration: none;
        color:#000;
        background: #f1f1f1;
    }
    ul ul{
        padding: 0;
        margin: 0;
        width: 140px;
        border: 1px solid #333;
        position: absolute;
        top:30px;
        left: -1px;
        background-color:#FF9;
        display: none;
    }
    ul ul li{
        text-align: center;
        line-height: 30px;
    }
     window.onload = function(){
        var ul = document.getElementById('ull');
        var a = document.getElementById('link');
        var li = document.getElementById('lis');
    
        li.onmouseover = function (){
            ul.style.display = 'block';
            a.style.background = 'yellow';
        };
        li.onmouseout = function (){
            ul.style.display = 'none';
            a.style.background = '#F1F1F1';
        };
    }

     

  • 相关阅读:
    devops
    classloader
    webpack之个人理解
    java map
    前端性能资料
    kibana使用的lucene查询语法
    【转】关于JVM CPU资源占用过高的问题排查
    netstat命令
    使用LR11录制手机脚本
    jemeter逻辑控制器
  • 原文地址:https://www.cnblogs.com/xiayedexin/p/5124596.html
Copyright © 2011-2022 走看看