<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
body,ul,li{ margin:0; padding:0;}
.box{ 400px; margin:50px auto;}
.box li{ list-style:none; cursor:pointer;}
.box ul{ float:left; 100px; margin-right:10px; text-align:center; height:30px; line-height:30px; background:#999;}
.box li ul{ display:none; 100px; text-align:center; }
.box li ul li{ background:#CCC; height:30px; line-height:30px;}
.box li.hover ul{ display:block;}
</style>
<script>
window.onload=function(){
var ok=document.getElementById("ok");
var liok=ok.getElementsByTagName("li");
//alert(liok.length)
for(var i=0;i<liok.length;i++){
if(liok[i].className=='box1'){
liok[i].onmouseover=function(){
this.className='hover'
};
liok[i].onmouseout=function(){
this.className=''
};
}
}
};
</script>
</head>
<body>
<div class="box" id="ok">
<ul>
<li class="box1"><a href="#" target="_blank">平面设计</a>
<ul id="list_1">
<li><a href="#" target="_blank">平面设计</a></li>
<li><a href="#" target="_blank">平面设计</a></li>
<li><a href="#" target="_blank">平面设计</a></li>
<li><a href="#" target="_blank">平面设计</a></li>
</ul>
</li>
</ul>
<ul>
<li class="box1"><a href="#" target="_blank">平面设计</a>
<ul id="list_2">
<li><a href="#" target="_blank">平面设计</a></li>
<li><a href="#" target="_blank">平面设计</a></li>
<li><a href="#" target="_blank">平面设计</a></li>
<li><a href="#" target="_blank">平面设计</a></li>
</ul>
</li>
</ul>
<ul>
<li class="box1"><a href="#" target="_blank">平面设计</a>
<ul id="list_3">
<li><a href="#" target="_blank">平面设计</a></li>
<li><a href="#" target="_blank">平面设计</a></li>
<li><a href="#" target="_blank">平面设计</a></li>
<li><a href="#" target="_blank">平面设计</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>