微博菜单伸缩展开
<!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{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{margin:0;padding:0;width: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>
