怎么封装下面的下拉菜单代码呢？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标点击事件</title>
<style type="text/css">
*{margin:0;padding:0;list-style:none;text-decoration:none;}
.head{background:#FFF;width: 100%;position: fixed;border:1px solid rgb(230,230,230);border-top:3px solid rgb(255,133,0);}
.head_content{width:1000px;height:40px;margin:0 auto;}
.head_content .left ul li{float: left;line-height: 40px;width: 100px;text-align: center;}
.head_content .left ul li a,.head_content .right ul li a{color:#bebcbc;}
.head_content .right ul li{float: right;line-height: 40px;width: 70px;text-align: center;}
.head_content .left{height: 100%;float: left;width: 400px}
.head_content .left ul li ul,.head_content .right ul li ul{display:none;overflow:hidden;background:#FFF;border:1px solid #FF8600;border-top:1px solid #FFF;}
.head_content .left ul li ul li,.head_content .right ul li ul li{border-bottom:1px solid #FF8600;height:25px;line-height:25px;}
.head_content .right{height: 100%;float: right;width: 440px;}
.head_content .left ul li a:hover,.head_content .right ul li a:hover{color: #ff8600;display: block;background: #EFEFF7;}
.head_content .right .close{background:url(images/close.png) no-repeat 10%;height: 20px;line-height: 20px;border:1px solid #E7E7EF;float: right;width:48px;text-indent:20px;margin:8px 20px;}
</style>
</head>
<body>
<div>
<div>
<div>
<ul id="menu1">
<li><a href="">设为首页</a></li>
<li><a href="">我的菜单
<img src="images/sel.png"></a>
<ul>
<li><a href="">新闻</a></li>
<li><a href="">电视视频</a></li>
<li><a href="">电影</a></li>
<li><a href="">明星</a></li>
<li><a href="">国内</a></li>
</ul>
</li>
<li><a href="">手机新浪网</a></li>
<li><a href="">移动客户端
<img src="images/sel.png"></a>
<ul>
<li><a href="">新浪微博</a></li>
<li><a href="">新浪新闻</a></li>
<li><a href="">新浪体育</a></li>
<li><a href="">新浪娱乐</a></li>
<li><a href="">新浪财经</a></li>
<li><a href="">天气通</a></li>
<li><a href="">新浪游戏</a></li>
</ul>
</li>
</ul>
</div><!-- left结束 -->
<div>
<div><a href="#">关闭</a></div>
<ul id="menu2">
<li><a href="">网站导航</a></li>
<li><a href="">邮箱<img src="images/sel.png"></a>
<ul>
<li><a href="">免费邮箱</a></li>
<li><a href="">VIP邮箱</a></li>
<li><a href="">企业邮箱</a></li>
</ul>
</li>
<li><a href="">博客<img src="images/sel.png"></a>
<ul>
<li><a href="">博客评论</a></li>
<li><a href="">未读提醒</a></li>
</ul>
</li>
<li><a href="">微博<img src="images/sel.png"></a>
<ul>
<li><a href="">私信</a></li>
<li><a href="">评论</a></li>
<li><a href="">@我</a></li>
</ul>
</li>
<li><a href="">登录</a></li>
</ul>
</div><!-- right结束 -->
</div><!-- head_content结束 -->
</div><!-- head结束 -->
<script type="text/javascript">
// 左边导航下拉菜单
var ul=document.getElementById("menu1")
var lis=ul.getElementsByTagName("li")
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover=function () {
var oUl=this.getElementsByTagName("ul")[0];
oUl.style.display="block";
}
lis[i].onmouseout=function () {
var oUl=this.getElementsByTagName("ul")[0];
oUl.style.display="none";
}
}
// 右边导航下拉菜单
var ul=document.getElementById("menu2")
var lis=ul.getElementsByTagName("li")
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover=function () {
var oUl=this.getElementsByTagName("ul")[0];
oUl.style.display="block";
}
lis[i].onmouseout=function () {
var oUl=this.getElementsByTagName("ul")[0];
oUl.style.display="none";
}
}
</script>
</body>
</html>
