zoukankan      html  css  js  c++  java
  • 微博菜单伸缩展开

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>练习微博</title>
    <script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>
    <style type="text/css">
    /**{margin:0;padding:0;}*/
    li{list-style:none;}
    .lis{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{margin:0;padding:0;140px;border:1px solid #333;position:absolute;top:30px;left:-1px;background:#f1f1f1;display:none;display:none;}
    ul ul li{text-align:center;line-height:30px;}
    </style>

    </head>
    <body>
    <ul>
    <li class="lis" id="lis">
    <a href="#" id="link">微博</a>
    <ul id="ul1">
    <li>私信</li>
    <li>评论</li>
    <li>@我</li>
    </ul>
    </li>
    </ul>
    </body>
    </html>
    <script type="text/javascript">
    window.onload=function (){
    var li=document.getElementById("lis");
    var ul1=document.getElementById("ul1");
    var link=document.getElementById("link");

    li.onmouseover=show;
    li.onmouseout=hide;
    function show(){
    ul1.style.display='block';
    link.style.background="yellow";
    }
    function hide(){
    ul1.style.display='none';
    link.style.background="#f1f1f1";
    }
    }
    abc();
    </script>

  • 相关阅读:
    loadrunner监控linux之linux下安装rpc
    Linux中top命令参数详解
    使用jmeter监控服务器性能指标
    jmeter连接mysql数据库配置
    loadrunner--设置代理录制
    页面下载时间细分图组成
    linux网络配置
    科学把妹法
    简单而强大的bitset
    名言札记
  • 原文地址:https://www.cnblogs.com/ll-taj/p/6531923.html
Copyright © 2011-2022 走看看