关于下拉菜单背景图片问题

怎么才能让鼠标移动到子菜单时...父菜单的背景图片不要消失.....
比如移动到学校简介时 ..网站首页的背景图片不要消失....
下面代码直接保存为html即可<html>
<head><SCRIPT language=JavaScript>
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
  d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
  if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
  obj.visibility=v; }
}
//-->
</SCRIPT>
<style type="text/css">
<!--#navigation {
font-weight: bold;
height: 38px;
float: right;
width:675px;
padding-left: 5px;
}
#navigation ul, #navigation ul li {
  list-style: none;
  margin: 0;
  padding: 0;
}
#navigation ul {
text-align: center;}
#navigation ul li {
display: inline;
width: 67px;
}
#navigation ul li a {
color: #000000;
text-decoration: none;
height: 38px;
}
#navigation ul li span {
font-size: 12px;
width: 67px;
font-weight: bold;
color: #333333;
text-align: center;
padding-top: 10px;}
#navigation ul li a:hover span {
width: 64px;
background-image: url(http://xaguangan.com/images/navbg1.gif);
height: 29px;
}
#navigation ul li a:hover {
background-color: #2f8fa9; }
#navigation #current a {}
#navigation #current a span {}
/*- Internet Explorer...It's Hacktastic!--------------------------- *//*\*//*/
#navigation ul li a {
  display: inline-block;
  white-space: nowrap;
  width: 1px;
}#navigation ul {
  padding-bottom: 0;
  margin-bottom: -1px;
}
/**//*\*/
* html #navigation ul li a {
padding: 0;
font-size: 12px;
}
/**/
-->
</style>
</head>
<body>
<table width="900" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
<td width="675" height="38" valign="top" background="http://xaguangan.com/images/navmenubg.gif" >
  <div id="navigation">
  <ul>
  <!-- CSS Tabs -->
<li onMouseOver="MM_showHideLayers('sub1','','show')" onMouseOut="MM_showHideLayers('sub1','','hide')"><a href="../index.asp"><span>网站首页</span></a>
<DIV id=menu1 style="POSITION: absolute">
<DIV id=sub1 onMouseOut="MM_showHideLayers('sub1','','hide')" onMouseOver="MM_showHideLayers('sub1','','show')" style="HEIGHT: 0px; LEFT: -71px; POSITION: absolute; TOP: 28px; VISIBILITY: hidden; WIDTH: 0px; Z-INDEX: 0">
<table width="64" border="0" cellpadding="0" cellspacing="0">
<tr>
  <td background="http://xaguangan.com/images/navmenu_01.gif" width="64" valign="top" align="center">
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
  <td height="15" align="center" valign="middle"><a href="../about.asp?pid=40&ppid=124">学校简介</a></td>
  </tr>
<tr>
  <td height="15" align="center" valign="middle"><a href="../news.asp?pid=47">招生信息</a></td>
  </tr>
<tr>
  <td height="15" align="center" valign="middle"><a href="../news.asp?pid=41&ppid=135"><font class="Top1">最新公告</font></a></td>
  </tr>  </table></td>
</tr>
<tr><td><img src="http://xaguangan.com/images/navmenu_02.gif" width="64" height="2" alt=""></td>
</tr>
</table>
</DIV></DIV></li>
<li><a href="about.asp?pid=40"><span>公司简介</span></a></li>
<li><a href="about.asp?pid=40"><span>新闻中心</span></a></li>
<li><a href="about.asp?pid=40"><span>项目介绍</span></a></li>
<li><a href="about.asp?pid=40"><span>健康前言</span></a></li>
<li><a href="about.asp?pid=40"><span>产品展示</span></a></li>
<li><a href="about.asp?pid=40"><span>论坛</span></a></li>
<li><a href="about.asp?pid=40"><span>留言板</span></a></li>
<li><a href="about.asp?pid=40"><span>人才招聘</span></a></li>
<li><a href="about.asp?pid=40"><span>联系我们</span></a></li>  </ul>
  </div></td>
  </tr>
</table>
</body>
</html>
怎么才能让鼠标移动到子菜单时...父菜单的背景图片不要消失.....
比如移动到学校简介时 ..网站首页的背景图片不要消失....