<div id="comlist">
<span class="comfit" onmouseover="showContent('0')" id="nav0" style="cursor:hand"><a href="http://www.xx1.com/">菜单1</a></span>
<span class="comfit" onmouseover="showContent('1')" id="nav1" style="cursor:hand"><a href="http://www.xx2.com/">菜单2</a></span>
<span class="comfit" onmouseover="showContent('2')" id="nav2" style="cursor:hand"><a href="http://www.xx3.com/">菜单3</a></span>
</div>
<div id="content0" style="display:none;">
  <div id="comr1">
  </div>
</div>
 
<div id="content1" style="display:none;">
 <div id="comr2">
 </div>
</div><script language="JavaScript"> 
 <!--
 function showContent(id)
 {
 for (var i = 0;i < 2;i++)
 {
   var nav = document.getElementById("nav" + i);
   var content = document.getElementById("content" + i);
 if (i == id)
    {
    nav.className = 'selected';
    content.style.display = "";
    }
 else
 {
   nav.className = 'comfit';   
   content.style.display = "none";
 }
 }
 }
 //-->
 </script>原功能是 下拉菜单 TAB的切换功能  鼠标经过菜单1 显示comr1层的内容
                         鼠标经过菜单2 显示comr2层的内容
   实际需要是,改成 当鼠标 离开comr1 层内容的时候  层内容消失,就是完全的下拉菜单效果!请高手帮忙改下
                    

解决方案 »

  1.   

    给comr1添加onmouseout和onmouseover事件,当comr1处于显示状态时over的时候就显示,out的时候就消失
      

  2.   

    <div id="comlist">
    <span class="comfit" onmouseover="showContent('0')" id="nav0" style="cursor:hand;width:70px;" onmouseout="showContent(0)" onmouseover="showContent(0)"><a href="http://www.xx1.com/">菜单1</a></span>
    <span class="comfit" onmouseover="showContent('1')" id="nav1" style="cursor:hand;width:70px;" onmouseout="showContent(1)" onmouseover="showContent(1)"><a href="http://www.xx2.com/">菜单2</a></span>
    <span class="comfit" onmouseover="showContent('2')" id="nav2" style="cursor:hand;width:70px;" onmouseout="showContent(2)" onmouseover="showContent(2)"><a href="http://www.xx3.com/">菜单3</a></span>
    </div><div id="content0" style="display:none;">
      <div id="comr1">
      11111
      </div>
    </div>
     
    <div id="content1" style="display:none;margin-left:70px;">
     <div id="comr2">
     222222
     </div>
    </div>
    <div id="content2" style="display:none;margin-left:140px;">
     <div id="comr3">
     33333
     </div>
    </div><script language="JavaScript">  
     <!--
     function showContent(id)
     {
     for (var i = 0;i < 3;i++)
     {
      var nav = document.getElementById("nav" + i);
      var content = document.getElementById("content" + i);
     if (i == id)
      {
      nav.className = 'selected';
      content.style.display = "";
      }
     else
     {
      nav.className = 'comfit';   
      content.style.display = "none";
     }
     }
     }
     //-->
     </script>
     
      

  3.   

    谢谢  我再试一试 
    楼上教育我的时候  我也改了增加个function hide Content(id)function hideContent(id){for (var i = 0;i < 5;i++){var nav = document.getElementById("nav" + i);var content = document.getElementById("content" + i);if (i == id){nav.className = 'selected';content.style.display = "none";}else{nav.className = 'comfit';   content.style.display = "none";}}}然后再每个层后面 加个 
    <div id="comr1"onmouseout   ="hideContent('0')">