妙味课堂20160112js实例仿新浪菜单

最新推荐文章于 2021-09-29 02:12:00 发布

weixin_30824599

最新推荐文章于 2021-09-29 02:12:00 发布

阅读量66

点赞数

原文链接：http://www.cnblogs.com/xiayedexin/p/5124596.html

版权

  <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';
    };
}