怎么封裝下面的下拉菜單代碼呢？
<!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="">設(shè)為首頁</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="">國內(nèi)</a></li>
</ul>
</li>
<li><a href="">手機新浪網(wǎng)</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="">新浪財經(jīng)</a></li>
<li><a href="">天氣通</a></li>
<li><a href="">新浪游戲</a></li>
</ul>
</li>
</ul>
</div><!-- left結(jié)束 -->
<div>
<div><a href="#">關(guān)閉</a></div>
<ul id="menu2">
<li><a href="">網(wǎng)站導(dǎo)航</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="">企業(yè)郵箱</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結(jié)束 -->
? ? </div><!-- head_content結(jié)束 -->
</div><!-- head結(jié)束 -->
<script type="text/javascript">
? ? // 左邊導(dǎo)航下拉菜單
? ? 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";
}
}
// 右邊導(dǎo)航下拉菜單
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>
