javascript下拉菜单问题

Question

<script language="javascript">
/******************************************************
* 很酷的下拉菜单  Share JavaScript (http://www.ShareJS.com)
* 使用此脚本程序，请保留此声明
* 获取此脚本以及更多的JavaScript程序，请访问 http://www.ShareJS.com
******************************************************/function menuControl(show)
{ window.event.cancelBubble=true;
var objID=event.srcElement.id;
var index=objID.indexOf("_");
var mainID=objID.substring(0,index);
var numID=objID.substring(index+1,objID.length);
if(mainID=="menubar")
{
if(show==1)
{
eval("showMenu("+"menu_"+numID+")");
//alert("showMenu("+"menu_"+numID+")");
}
else
{
eval("hideMenu("+"menu_"+numID+")");
}
}}var nbottom=0,speed=10;
function displayMenu(obj)
{ obj.style.clip="rect(0 310 "+nbottom+"% 0)";
nbottom+=speed;
if(nbottom<=100) 
{
timerID=setTimeout("displayMenu("+obj.id+"),70");
}
else clearTimeout(timerID);
}
function showMenu(obj)
{

obj.style.display="block";
obj.style.clip="rect(0 0 0 0)";
nbottom=5;
displayMenu(obj);
}
function hideMenu(obj)
{
nbottom=0;
obj.style.display="none";
}
function keepMenu(obj)
{
obj.style.display="block";
}
function hide(obj){
obj.style.display="none";
}
</script>
上面的代码是控制一个下拉菜单的缓慢下啦效果的  
在rect(0 310 "+nbottom+"% 0)"这里控制剪切区域的宽度
我在IE7底下测试  缓慢下拉的效果模拟出来了
但是  在二级菜单有子菜单的情况下  会出现背景重叠
或者当鼠标移动到另外菜单  但是子菜单背景还在  菜单项消失的问题
谁帮忙看下  谢谢

Answer 1

html代码：<div class="menu">
  <ul id="menu1">
    <li><a href="./menu/index.html" class="list" id="menubar_1" onmouseover="menuControl(1)" onmouseout="menuControl(0)">首页
      <!--[if IE 7]><!-->
      </a>
        <!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul id="menu_1" onmouseover="keepMenu(this)" onmouseout="hideMenu(this)">
          <li><a href="#" title="The zero dollar ads page"><img src="imagess/menu_bz.gif" border="none" align="absmiddle" style="padding-right:10px;" />首页一级</a></li>
          <li><a href="../menu/embed.html" title="Wrapping text around images"><img src="imagess/menu_bz.gif" border="none" align="absmiddle" style="padding-right:10px;" />首页一级</a></li>
          <li><a href="../menu/form.html" title="Styling forms" ><img src="imagess/menu_bz.gif" border="none" align="absmiddle" style="padding-right:10px;" />首页一级</a>
              <ul class="ul_li">
                <li><a href="../menu/form.html" title="Styling forms"><img src="imagess/menu_bz.gif" border="none" align="absmiddle" style="padding-right:10px;" />首页二级</a></li>
                <li><a href="../menu/nodots.html" title="Removing active/focus borders"><img src="imagess/menu_bz.gif" border="none" align="absmiddle" style="padding-right:10px;" />首页二级</a></li>
                <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders"><img src="imagess/menu_bz.gif" border="none" align="absmiddle" style="padding-right:10px;" />首页二级</a></li>
              </ul>
          </li>
          
         <li><a href="../menu/bodies.html" title="fun with background images"><img src="imagess/menu_bz.gif" border="none" align="absmiddle" style="padding-right:10px;" />首页一级</a></li>
          <li><a href="../menu/fade_scroll.html" title="fade-out scrolling"><img src="imagess/menu_bz.gif" border="none" align="absmiddle" style="padding-right:10px;" />首页一级</a></li>
          <li><a href="../menu/em_images.html" title="em size images compared"><img src="imagess/menu_bz.gif" border="none" align="absmiddle" style="padding-right:10px;" />首页一级</a></li>
        </ul>
      <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a href="./boxes/index.html">新闻中心
      <!--[if IE 7]><!-->
      </a>
        <!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul>
          <li><a href="spies.html" title="a coded list of spies"><img src="imagess/menu_bz.gif" border="none" align="absmiddle" style="padding-right:10px;" />新闻一级</a></li>
          <li><a href="vertical.html" title="a horizontal vertical menu"><img src="imagess/menu_bz.gif" border="none" align="absmiddle" style="padding-right:10px;" />新闻一级</a></li>
          <li><a href="expand.html" title="an enlarging unordered list"><img src="imagess/menu_bz.gif" border="none" align="absmiddle" style="padding-right:10px;" />新闻一级</a></li>
          <li><a href="enlarge.html" title="an unordered list with link images"><img src="imagess/menu_bz.gif" border="none" align="absmiddle" style="padding-right:10px;" />新闻一级</a></li>
          <li><a href="cross.html" title="non-rectangular links"><img src="imagess/menu_bz.gif" border="none" align="absmiddle" style="padding-right:10px;" />新闻一级</a></li>
          <li><a href="jigsaw.html" title="jigsaw links"><img src="imagess/menu_bz.gif" border="none" align="absmiddle" style="padding-right:10px;" />新闻一级</a></li>
          <li><a href="circles.html" title="circular links"><img src="imagess/menu_bz.gif" border="none" align="absmiddle" style="padding-right:10px;" />新闻一级</a></li>
        </ul>
      <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a href="./mozilla/index.html">产品中心
      <!--[if IE 7]><!-->
      </a>
        <!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul>
          <li><a href="../mozilla/dropdown.html" title="A drop down menu"><img src="imagess/menu_bz.gif" border="none" align="absmiddle" style="padding-right:10px;" />产品一级</a></li>
          <li><a href="../mozilla/cascade.html" title="A cascading menu"><img src="imagess/menu_bz.gif" border="none" align="absmiddle" style="padding-right:10px;" />产品一级</a></li>
          <li><a href="../mozilla/content.html" title="Using content:"><img src="imagess/menu_bz.gif" border="none" align="absmiddle" style="padding-right:10px;" />产品一级</a></li>
          <li><a href="../mozilla/moxbox.html" title=":hover applied to a div"><img src="imagess/menu_bz.gif" border="none" align="absmiddle" style="padding-right:10px;" />产品一级</a></li>
          <li><a href="../mozilla/rainbow.html" title="I can build a rainbow"><img src="imagess/menu_bz.gif" border="none" align="absmiddle" style="padding-right:10px;" />产品一级</a></li>
          <li><a href="../mozilla/snooker.html" title="Snooker cue"><img src="imagess/menu_bz.gif" border="none" align="absmiddle" style="padding-right:10px;" />产品一级</a></li>
          <li><a href="../mozilla/target.html" title="Target Practise"><img src="imagess/menu_bz.gif" border="none" align="absmiddle" style="padding-right:10px;" />产品一级</a></li>
          <li><a href="../mozilla/splittext.html" title="Two tone headings"><img src="imagess/menu_bz.gif" border="none" align="absmiddle" style="padding-right:10px;" />产品一级</a></li>
          <li><a href="../mozilla/shadow_text.html" title="Shadow text"><img src="imagess/menu_bz.gif" border="none" align="absmiddle" style="padding-right:10px;" />产品一级</a></li>
        </ul>
      <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a href="./ie/index.html">客户体验
      <!--[if IE 7]><!-->
      </a>
        <!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul>
          <li><a href="../ie/exampleone.html" title="Example one"><img src="imagess/menu_bz.gif" border="none" align="absmiddle" style="padding-right:10px;" />客户一级</a></li>
          <li><a href="../ie/weft.html" title="Weft fonts"><img src="imagess/menu_bz.gif" border="none" align="absmiddle" style="padding-right:10px;" />客户一级</a></li>
          <li><a href="../ie/exampletwo.html" title="Vertical align"><img src="imagess/menu_bz.gif" border="none" align="absmiddle" style="padding-right:10px;" />客户一级</a></li>
        </ul>
      <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a href="./opacity/index.html">公司简介
      <!--[if IE 7]><!-->
      </a>
        <!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul>
          <li><a href="../opacity/colours.html" title="colour wheel"><img src="imagess/menu_bz.gif" border="none" align="absmiddle" style="padding-right:10px;" />公司一级</a></li>
          <li><a href="../opacity/picturemenu.html" title="a menu using opacity"><img src="imagess/menu_bz.gif" border="none" align="absmiddle" style="padding-right:10px;" />公司一级</a></li>
          <li><a href="../opacity/png.html" title="partial opacity"><img src="imagess/menu_bz.gif" border="none" align="absmiddle" style="padding-right:10px;" />公司一级</a></li>
          <li><a href="../opacity/png2.html" title="partial opacity II"><img src="imagess/menu_bz.gif" border="none" align="absmiddle" style="padding-right:10px;" />公司一级</a></li>
          <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders"><img src="imagess/menu_bz.gif" border="none" align="absmiddle" style="padding-right:10px;" />公司一级
            <!--[if IE 7]><!-->
            </a>
              <!--<![endif]-->
              <!--[if lte IE 6]><table><tr><td><![endif]-->
              <ul>
                <li><a href="../menu/form.html" title="Styling forms"><img src="imagess/menu_bz.gif" border="none" align="absmiddle" style="padding-right:10px;" />公司二级</a></li>
                <li><a href="../menu/nodots.html" title="Removing active/focus borders"><img src="imagess/menu_bz.gif" border="none" align="absmiddle" style="padding-right:10px;" />公司二级</a></li>
                <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders"><img src="imagess/menu_bz.gif" border="none" align="absmiddle" style="padding-right:10px;" />公司二级</a></li>
              </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
          </li>
        </ul>
      <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
  </ul>
</div>

Answer 2

CSS代码：<style>
.menu {     width:971px;      font-size:0.85em;     position:relative;     z-index:100; background-color:#000000; background-image:url(imagess/menu_bg.gif); border:none; line-height:35px;} 
/* remove all the bullets, borders and padding from the default list styling */ 
.menu ul {     padding:0;     margin:0;     list-style-type:none; } 
.menu ul ul {     width:150px; } 
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */ 
.menu li {     float:left;     width:150px; padding-left:10px; position:relative; display:block; line-height:30px;}
 /* style the links for the top level */ 
 .menu a, .menu a:visited {     display:block;     font-size:11px;     text-decoration:none; color:#fff; width:139px;      height:35px; padding-left:10px;      line-height:35px; } /*一级菜单高度设置*/
 /* a hack so that IE5.5 faulty box model is corrected */ 
 * html .menu a, * html .menu a:visited {     width:150px;     w\idth:139px; }  
 /* style the second level background */ 
 .menu ul ul a.drop, .menu ul ul a.drop:visited {     background:#b4b7bd url(../img/drop.gif) bottom right no-repeat; color:#FFFFFF }/*修改二级菜单背景色*/ 
 /* style the second level hover */ 
 .menu ul ul a.drop:hover{     background:#c9ba65 url(../img/drop.gif) bottom right no-repeat; border-bottom:1px dotted #b4b7bd; } 
 .menu ul ul :hover > a.drop {     background:#c9ba65 url(../img/drop.gif) bottom right no-repeat; } 
 /* style the third level background */ 
 .menu ul ul ul a, .menu ul ul ul a:visited {     background:#b4b7bd; border-bottom:1px dotted #666} /*三级菜单背景颜色与底部线条设置*/ 
 /* style the third level hover */ 
 .menu ul ul ul a:hover {     background:#b2ab9b; }   
 /* hide the sub levels and give them a positon absolute so that they take up no room */ 
 .menu ul ul {     visibility:hidden;     position:absolute;     height:0;     top:31px;     left:0;      width:150px; } 
 /* another hack for IE5.5 */ 
 * html .menu ul ul {     top:30px;     t\op:31px; }  
 /* position the third level flyout menu */ 
 .menu ul ul ul{     left:150px;      top:0;     width:150px; } 
 /* position the third level flyout menu for a left flyout */ 
 .menu ul ul ul.left {     left:-150px; }  
 /* style the table so that it takes no ppart in the layout - required for IE to work */ 
 .menu table {position:absolute; top:0; left:0;}  
 /* style the second level links */ 
 .menu ul ul a, .menu ul ul a:visited {     background:#b4b7bd;      color:#000;      height:auto;      line-height:1em;      padding:5px 10px;      width:129px     /* yet another hack for IE5.5 */ } /*二级菜单与三级菜单的宽度*/
 * html .menu ul ul a{     width:150px;     w\idth:129px; }   
 /* style the top level hover */ 
 .menu a:hover, .menu ul ul a:hover{     color:#fff;      background-color:#b4b7bd; }  /*导航条一级菜单颜色* display:block; height:35px;*/
 .menu :hover > a, .menu ul ul :hover > a {     color:#fff;     background-color:#b4b7bd; } /*导航条一级菜单颜色*/
  /* make the second level visible when hover on first level list OR link */ 
  .menu ul li:hover ul, .menu ul a:hover ul{     visibility:visible;  } 
  /* keep the third level hidden when you hover on first level list OR link */ 
  .menu ul :hover ul ul{     visibility:hidden; }  
  /* make the third level visible when you hover over second level list OR link */ 
  .menu ul :hover ul :hover ul{      visibility:visible; } 
  
#menu1 li ul a{display:block; height:24px; line-height:25px; background-color:#b4b7bd; text-align:left}
#menu1 li ul a:hover,#menu1 li ul a:link{ height:24px; line-height:25px; border-bottom:1px dotted #666;}
#menu1 li ul{ height:400px; width:150px;}
#menu1 li ul li{width:150px;}
</style>

Answer 3

效果类似与  http://www.audi.com/com/brand/en.html
这个网站上面的那一排（R8 TT）
谁能帮忙改下