<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
#box{
width: 200px;
margin: 0 auto;
font: 20px/60px "simhei";
text-align: center;
}
#box span{
display: block;<!--不支持宽高先变成块-->
height: 60px;
border:1px solid #181509;
}
#box ul{
border:1px solid #181509;
margin-top: 60px;
box-shadow: 2px 2px #ccc,-2px -2px #ccc;
display: none;
}
#box li{
height:60px;
}
</style>
</head>
<body>
<div id="box">
<span id="span1">设置</span>
<ul id="ul1">
<li>搜索设置</li>
<li>高级设置</li>
<li>关闭预测</li>
<li>搜索历史</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
//alert("百度一下你就知道");
/*
当鼠标移入span的时候,让ul显示出来
1.当鼠标移入span的时候,让ul样式的display变成block
2.当鼠标移出span的时候,让ul样式的display变为none
在css里面找标签通过选择器 document.getElementById
*/
//alert(document.getElementById("span1"));
document.getElementById("span1").onmouseover = function(){
//当鼠标移入span的时候,让ul样式的display变成block
document.getElementById("ul1").style.display = "block";
}
document.getElementById("span1").onmouseout = function(){
//当鼠标移入span的时候,让ul样式的display变成none
document.getElementById("ul1").style.display = "none";
}
</script>
案例效果