<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{padding: 0;margin: 0;}
ul,li{list-style: none;}
ul li.item{line-height: 35px;text-align:center;width: 120px;background: #888;}
ul li.item:hover{background: #999;cursor: pointer;}
ul li ul li{width: 100%;text-align: center;background: #aaa;}
ul li ul{display: none;}
</style>
<script type="text/javascript">
window.onload=function(){
var lis=document.getElementById("menu").children;
for(var i=0;i<lis.length;i++){
lis[i].onclick=function(){
var oul=this.children[0];
var dis=window.getComputedStyle(oul,null).display;
if(dis=="block"){
oul.style.display="none";
}else{
oul.style.display="block";
}
};
}
};
</script>
</head>
<body>
<ul id="menu">
<li class="item">AAAA
<ul>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
</ul>
</li>
<li class="item">BBBB
<ul>
<li>bbbb</li>
<li>bbbb</li>
<li>bbbb</li>
<li>bbbb</li>
</ul>
</li>
<li class="item">CCCC
<ul>
<li>cccc</li>
<li>cccc</li>
<li>cccc</li>
<li>cccc</li>
</ul>
</li>
<li class="item">DDDD
<ul>
<li>dddd</li>
<li>dddd</li>
<li>dddd</li>
<li>dddd</li>
</ul>
</li>
</ul>
</body>
</html>