鼠标放上去实现下拉
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>显示隐藏</title>
<style>
ul{
margin:0;
padding:0;
width: 80px;
border: solid 1px gray;
}
ul li{
list-style:none;
width: 80px;
}
ul li a{
display: block;
background: yellow;
text-decoration: none;
}
ul li ul{
background: #f1f1f1;
display: none;
}
</style>
</head>
<body>
<ul id="xi">
<li><a href="#">微博</a></li>
<li>
<ul id="di">
<li>私信我</li>
<li>@我</li>
<li>收藏我</li>
</ul>
</li>
</ul>
<script>
document.getElementById("xi").onmouseover = abc;
function abc(){
document.getElementById("di").style.display = 'block';
}
document.getElementById("xi").onmouseout = hid;
function hid(){
document.getElementById("di").style.display = 'none';
}
</script>
</body>
</html>
