一般实现一个下拉框，（实现的效果就是点击上去，下拉菜单），我的误区是鼠标点击和离开区域应该是最大的框，包含隐藏或是显示的下拉菜单。
其中box的区域就是：
整体的代码就是：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
ul{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
#box{
width: 200px;
margin: 0 auto;
font: 30px/60px "simhei";
text-align: center;
}
#box span{
display: block;
height: 60px;
border: 1px solid #1B1509;
}
#box ul{
margin-top: 6px;
border: 1px solid #1B1509;
box-shadow:2px 2px 2px #ccc,-2px -2px 1px #ccc;
display: none;
}
#box li{
height: 60px;
}
#box li:hover{
background: #0000FF;
color: #fff;
}
</style>
<body>
<div id="box">
<span id="span1">设置</span>
<ul id="ul1" >
<li>搜索设置</li>
<li>高级设置</li>
<li>关闭设置</li>
<li>搜索历史</li>
</ul>
</div>
</body>
<script type="text/javascript">
// 当鼠标移入到span的时候,让ul显示出来;
// 当鼠标移入到span的时候,让ul的样式的display变成block
// 在css里找标签通过选择器
//鼠标事件:onmouseover,onmouseout onclick
//函数:函数就是用来干活的;'.'其实可以理解为"的"的意思
document.getElementById('box').οnmοuseοver=function(){
document.getElementById('ul1').style.display='block';
}
document.getElementById('box').οnmοuseοut=function(){
document.getElementById('ul1').style.display='none';
}
</script>
</html>
实现的效果就是：
1332
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
