觉得代码恶心的话，自己重写也行，css样式要保留，自己不是做js的，但是突然用到了，求帮助
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css??????</title>
<style type="text/css">
<!--
#menu{ width:100%; background:#eeeeee; height:48px; border-bottom:1px solid #c6c6c6;border-top:1px solid #c6c6c6;}
.nav{ width:952px; margin:0 auto; list-style:none;}
.nav li { width:100px; display:block; float:left; border-left:1px solid #cfcfcf;border-right:1px solid #cfcfcf; margin-right:-1px; position:relative;}
.nav li a{padding:3px 0 7px 3px; width:97px;line-height:38px; color:#91b24f; font-weight:bold; text-decoration:none; display:block; font-size:14px;}.nav li a:hover{ background:#333333;border-bottom:1px solid #91B24F;color: #f6f6f6 !important}
.nav .rss{ float:right; margin-right:1px; }
-->.menu{ margin:0; padding:0; list-style:none; border:1px solid #c6c6c6; border-top:none; border-bottom:none; width:100px; margin-right:-1px; }
.menu a{ display:block; height:30px; line-height:30px; padding-left:10px; border-bottom:1px solid #c6c6c6; color:#91b24f; background-color:#EEE;}
.menu a:hover{ background-color:#333; color:#FFF;}.div1{display:none; position:absolute; top:49px; left:-2px; +left:0;}
</style>
<script>
function openMenu(_id){
closeMenu();
document.getElementById(_id).style.display = "block";
}
function closeMenu(){
var divArray = document.getElementById("menu").getElementsByTagName("div");
for(var i = 0; i<divArray.length; i++){
if(divArray[i].className == "div1") divArray[i].style.display = "none";
}
}
document.onclick = closeMenu;</script>
</head>
<body>
<div id="menu">
<ul class="nav"><li><a href="{{blog.baseurl}}/" onmouseover="openMenu('nav1')">Homepage</a>
<div id="nav1" class="div1">
<ul class="menu">
</ul>
</div>
</li><li><a href="javascript:void(0)" onmouseover="openMenu('nav3')">娱乐</a>
<div id="nav3" class="div1">
<ul class="menu">
<li><a href="javascript:void(0)">书籍</a>
<li><a href="javascript:void(0)">电影</a>
<li><a href="javascript:void(0)">音乐</a>
<li><a href="javascript:void(0)">创意</a>
</ul>
</div>
</li>
</ul>
</div></body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css</title>
<script src="../scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<style type="text/css">
<!
-- #menu
{
width: 100%;
background: #eeeeee;
height: 48px;
border-bottom: 1px solid #c6c6c6;
border-top: 1px solid #c6c6c6;
}
.nav
{
width: 952px;
margin: 0 auto;
list-style: none;
}
.nav li
{
width: 100px;
display: block;
float: left;
border-left: 1px solid #cfcfcf;
border-right: 1px solid #cfcfcf;
margin-right: -1px;
position: relative;
}
.nav li a
{
padding: 3px 0 7px 3px;
width: 97px;
line-height: 38px;
color: #91b24f;
font-weight: bold;
text-decoration: none;
display: block;
font-size: 14px;
}
.nav li a:hover
{
background: #333333;
border-bottom: 1px solid #91B24F;
color: #f6f6f6 !important;
}
.nav .rss
{
float: right;
margin-right: 1px;
}
-- > .menu
{
margin: 0;
padding: 0;
list-style: none;
border: 1px solid #c6c6c6;
border-top: none;
border-bottom: none;
width: 100px;
margin-right: -1px;
}
.menu a
{
display: block;
height: 30px;
line-height: 30px;
padding-left: 10px;
border-bottom: 1px solid #c6c6c6;
color: #91b24f;
background-color: #EEE;
}
.menu a:hover
{
background-color: #333;
color: #FFF;
}
.div1
{
display: none;
position: absolute;
top: 49px;
left: -2px; +left:0;}</style> <script>
$(document).ready(function() {
$(document).click(function() {
$('ul#nav>li>div').hide();
});
$('ul.nav>li').mouseover(function(event) {
$('ul.nav>li>div').hide();
$(this).children('div').show();
}).mouseout(function(event) {
if (!$(event.relatedTarget).closest('li').length) {
$('ul.nav>li>div').hide();
}
});
}); </script></head>
<body>
<div id="menu">
<ul class="nav">
<li><a href="{{blog.baseurl}}/">
Homepage</a>
<div id="nav1" class="div1">
<ul class="menu">
<li><a href="javascript:void(0)">1</a>
<li><a href="javascript:void(0)">2</a>
<li><a href="javascript:void(0)">3</a>
<li><a href="javascript:void(0)">4</a>
</ul>
</div>
</li>
<li><a href="javascript:void(0)">娱乐</a>
<div id="nav3" class="div1">
<ul class="menu">
<li><a href="javascript:void(0)">书籍</a>
<li><a href="javascript:void(0)">电影</a>
<li><a href="javascript:void(0)">音乐</a>
<li><a href="javascript:void(0)">创意</a>
</ul>
</div>
</li>
</ul>
</div>
</body>
</html>