js实现鼠标滑过显示二级菜单一级菜单的样式背景色变黑，宽度不增加

求大神帮助，我想让鼠标滑过一级菜单时二级菜单显示，同时一级菜单的宽度不变，背景变成黑色。
这个是html:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="JS代码,焦点图,JS广告代码,JS特效代码" />
<meta name="description" content="滑动二级下拉菜单JS代码，属于站长常用代码，更多焦点图代码请访问一流素材网JS代码频道。" />
<title>滑动二级下拉菜单JS代码-素材中国一流素材网</title> 
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
        <style>
            *{
                padding:0;
                margin:0;
            }
            h1{
                font-size:180px;
                line-height:180px;
                text-transform: uppercase;
                color:#f9f9f9;
                position:absolute;
                text-shadow:0 1px 1px #ddd;
                top:-25px;
                left:-20px;
                white-space: nowrap;
            }
            span.reference{
                position:fixed;
                left:10px;
                bottom:10px;
                font-size:11px;
            }
            span.reference a{
                color:#DF7B61;
                text-decoration:none;
                text-transform: uppercase;
                text-shadow:0 1px 0 #fff;
            }
            span.reference a:hover{
                color:#000;
            }
            .box{
margin-top:20px;
height:460px;
width:100%;
position:relative;
background:none;
-moz-box-shadow:0px 0px 10px #aaa;
-webkit-box-shadow:0px 0px 10px #aaa;
-box-shadow:0px 0px 10px #aaa;
            }ul.ldd_menu{
margin:0px;
padding:0;
display:block;
height:40px;
background-color:#D04528;
list-style:none;
font-family:"Trebuchet MS", sans-serif;
border-top:1px solid #EF593B;
border-bottom:1px solid #EF593B;
border-left:10px solid #D04528;
-moz-box-shadow:0px 3px 4px #591E12;
-webkit-box-shadow:0px 3px 4px #591E12;
-box-shadow:0px 3px 4px #591E12;
}
ul.ldd_menu a{
text-decoration:none;
}
ul.ldd_menu > li{
float:left;
position:relative;
}
ul.ldd_menu > li > span{
float:left;
color:#fff;
background-color:#D04528;
height:50px;
line-height:50px;
cursor:default;
padding:0px 20px;
text-shadow:0px 0px 1px #fff;
border-right:1px solid #DF7B61;
border-left:1px solid #C44D37;
}
ul.ldd_menu .ldd_submenu{
position:absolute;
top:50px;
width:150px;
display:none;
opacity:0.95;
left:0px;
font-size:10px;
background: #C34328;
border-top:1px solid #EF593B;
-moz-box-shadow:0px 3px 4px #591E12 inset;
-webkit-box-shadow:0px 3px 4px #591E12 inset;
-box-shadow:0px 3px 4px #591E12 inset;
}
a.ldd_subfoot{
background-color:#f0f0f0;
color:#444;
display:block;
clear:both;
padding:15px 20px;
text-transform:uppercase;
font-family: Arial, serif;
font-size:12px;
text-shadow:0px 0px 1px #fff;
-moz-box-shadow:0px 0px 2px #777 inset;
-webkit-box-shadow:0px 0px 2px #777 inset;
-box-shadow:0px 0px 2px #777 inset;
}
ul.ldd_menu ul{
list-style:none;
float:left;
border:0px;
margin:20px 0px 10px 30px;
padding:10px;
}
li.ldd_heading{
font-family: Georgia, serif;
font-size: 13px;
font-style: italic;
color:#FFB39F;
text-shadow:0px 0px 1px #B03E23;
padding:0px 0px 10px 0px;
}
ul.ldd_menu ul li a{
font-family: Arial, serif;
font-size:10px;
line-height:20px;
color:#fff;
padding:1px 3px;
}
ul.ldd_menu ul li a:hover{
-moz-box-shadow:0px 0px 2px #333;
-webkit-box-shadow:0px 0px 2px #333;
box-shadow:0px 0px 2px #333;
background:#AF412B;
}       </style>
    </head>
    <body>
<div class="box">
<ul id="ldd_menu" class="ldd_menu">
<li>
<span>Vacations</span><!-- Increases to 510px in width-->
<div class="ldd_submenu">
<ul>
<li class="ldd_heading"><a href="#">South America</a></li>
<li><a href="#">Antartica</a></li>
<li><a href="#">Africa</a></li>
<li><a href="#">Asia and Australia</a></li>
<li><a href="#">Europe</a></li>
</ul>
</div>
</li>
<li>
<span>Equipment</span>
<div class="ldd_submenu">
<ul>
<li class="ldd_heading"><a href="#">South America</a></li>
<li><a href="#">Antartica</a></li>
<li><a href="#">Africa</a></li>
<li><a href="#">Asia and Australia</a></li>
<li><a href="#">Europe</a></li>
</ul>
</div>
</li>

</ul>
</div>        <div></div>
<!-- The JavaScript -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
/**
 * the menu
 */
var $menu = $('#ldd_menu');

/**
 * for each list element,
 * we show the submenu when hovering and
 * expand the span element (title) to 510px
 */
$menu.children('li').each(function(){
var $this = $(this);
var $span = $this.children('span');
$span.data('width',$span.width());

$this.bind('mouseenter',function(){
$menu.find('.ldd_submenu').stop(true,true).hide();
$span.stop().animate({'width':'98px'},98,function(){
$this.find('.ldd_submenu').slideDown(98);
});
}).bind('mouseleave',function(){
$this.find('.ldd_submenu').stop(true,true).hide();
$span.stop().animate({'width':$span.data('width')+'px'},98);
});
});
            });
        </script>
    </body>
</html>
谢谢大神们了JavaScript鼠标menuColor