妙味课堂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';
};
}