<body>
<div id="div1">
<ul>
<li></li>
</ul>
</div>
<script>
var oDiv = document.getElementById('div1')
var oUl = oDiv.getElementsByTagName('ul')[0]
var Off = true
oDiv.onclick = function(){
if(Off){
oUl.style.display = "block"
Off = false
}else{
oUl.style.display = "none"
Off = true
}
}
</script>
css一般处理鼠标移动显示事件，利用:hover很方便就能实现。点击事件的话，一般跟JS配合。
显示隐藏，一般都是利用display这个CSS来控制，因为它隐藏的时候不占位置。
<!--例子如下--><!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style>
ul{width: 200pxmin-height: 50pxborder: 1px solid #808080}
li{display: none}
span{background: 'red'}
</style>
<body>
<ul>鼠标进来
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
</ul>
<ul>鼠标进来
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
</ul>
<ul>鼠标进来
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
</ul>
<ul>鼠标进来
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
</ul>
<script>
var uls = document.getElementsByTagName('ul')
for(i=0i<=uls.lengthi++){
uls[i].onmouseover=function(){
var lis = this.getElementsByTagName('li')
for(var i=0 i<lis.lengthi++){
lis[i].style.display='block'
}
}
uls[i].onmouseout=function(){
var lis = this.getElementsByTagName('li')
for(var i=0 i<lis.lengthi++){
lis[i].style.display='none'
}
}
}
</script>
</body>
</html>
