精简的下拉菜单 出现的问题

本帖最后由 fo968 于 2010-04-16 09:38:40 编辑

解决方案 »

  1.   

    function qiehuan(num){
      for(var id = 0;id<=5;id++)
      {
      if(id==num)
      {
      document.getElementById("qh_con"+id).style.display="block";
      document.getElementById("mynav"+id).className="nav_on";
      }
      else
      {
      document.getElementById("qh_con"+id).style.display="none";
      document.getElementById("mynav"+id).className="";
      }
      }
    }id为什么要小于5，你没发现"qh_con"，"mynav"只有0和1吗
      

  2.   

    <!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"><style type="text/css">  
    <!--
    #xmenu {
    height: 40px;
    width: 960px;
    border: 1px solid #000099;
    }
    #xmenu_nav {
    margin: 0px;
    height: 40px;
    width: 900px;
    }
    #xmenu_nav li {
    float: left;
    height: 30px;
    width: auto;
    margin-left: 15px;
    list-style-type: none;
    }
    #xmenu_nav li a {
    font-size: 12px;
    color: #990000;
    text-decoration: none;
    }
    #menu_con {
    height: 40px;
    width: 900px;
    }
    #menu_con ul {
    height: 35px;
    width: 900px;
    margin: 0px;
    }
    #menu_con ul li {
    float: left;
    height: 30px;
    width: auto;
    margin-left: 10px;
    list-style-image: none;
    list-style-type: none;
    }
    -->
    </style>
    </head>
     
    <body>
    <script type="text/javascript">  
     
    function qiehuan(num){
      for(var id = 0;id<=1;id++)
      {
      if(num==id)
      {
      document.getElementById("qh_con"+id).style.display="block";
      document.getElementById("mynav"+id).className="nav_on";
      }
      else
      {
      document.getElementById("qh_con"+id).style.display="none";
      document.getElementById("mynav"+id).className="";
      }
      }
    }
    function yc()
    {
      for(var id = 0;id<=1;id++)
      {
       document.getElementById("qh_con"+id).style.display="none";
       document.getElementById("mynav"+id).className="none";
      }
    }
    </script>
     
    <div id="xmenu">
      <ul id="xmenu_nav">
        
      <li><a href="index.php" onmouseover="javascript:qiehuan(0)" onmouseout="yc()" id="mynav0" class="nav_on"><span>狗狗论坛</span></a></li>
      <li class="menu_line"></li>
      <li><a href="http://www.xiandog.com" onmouseover="javascript:qiehuan(1)" onmouseout="yc()" id="mynav1" class="nav_off" target="_blank"><span>狗狗商城</span></a></li>
        
     
      </ul>
    </div><div id="menu_con">
      <div id="qh_con0" style="display: block;">
      <ul>
        
        
      <li><a href="task.php"><span>论坛任务</span></a></li>
        
      <li><a href="medal.php"><span>论坛勋章</span></a></li>
        
      <li><a href="magic.php"><span>道具商店</span></a></li>
        
        
      </ul>
      </div>
      <div id="qh_con1" style="display: none;margin-left: 90px;">
      <ul>
      <li><a href="http://www.xiandog.com" target="_blank" ><span>宠物商铺</span></a></li>
        
      <li><a href="gift.php"><span>礼品兑换</span></a></li>
      </ul>
      </div>  
        
      </div>  </body>
    </html>
      

  3.   

    谢谢楼上的朋友　　但是又出现新问题了　我们点不到　下拉菜单！　
    当鼠标移出　“狗狗商城”时　　　<li><a href="http://www.1111.com" onmouseover="javascript:qiehuan(1)" onmouseout="yc()" id="mynav1" class="nav_off" target="_blank"><span>狗狗商城</span></a></li>相对应的下拉菜单也消失了！！　想要实现的是，鼠标离开下拉菜单时　触发事件　从而隐藏下拉菜单
      

  4.   


    <!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"><style type="text/css">   
    <!--
    #xmenu {
    height: 40px;
    width: 960px;
    border: 1px solid #000099;
    }
    #xmenu_nav {
    margin: 0px;
    height: 40px;
    width: 900px;
    }
    #xmenu_nav li {
    float: left;
    height: 30px;
    width: auto;
    margin-left: 15px;
    list-style-type: none;
    }
    #xmenu_nav li a {
    font-size: 12px;
    color: #990000;
    text-decoration: none;
    }
    #menu_con {
    height: 40px;
    width: 900px;
    }
    #menu_con ul {
    height: 35px;
    width: 900px;
    margin: 0px;
    }
    #menu_con ul li {
    float: left;
    height: 30px;
    width: auto;
    margin-left: 10px;
    list-style-image: none;
    list-style-type: none;
    }
    -->
    </style>
    </head>
     
    <body>
    <script type="text/javascript">   
     
    function qiehuan(num){
      for(var id = 0;id<=1;id++)
      {
      if(num==id)
      {
      document.getElementById("qh_con"+id).style.display="block";
      document.getElementById("mynav"+id).className="nav_on";
      }
      else
      {
      document.getElementById("qh_con"+id).style.display="none";
      document.getElementById("mynav"+id).className="";
      }
      }
    }
    function yc(obj)
    {
    obj.style.display = "none";
    }
    </script>
     
    <div id="xmenu">
      <ul id="xmenu_nav">
        
      <li><a href="index.php" onmouseover="javascript:qiehuan(0)"  id="mynav0" class="nav_on"><span>狗狗论坛</span></a></li>
      <li class="menu_line"></li>
      <li><a href="http://www.xiandog.com" onmouseover="javascript:qiehuan(1)"  id="mynav1" class="nav_off" target="_blank"><span>狗狗商城</span></a></li>
        
     
      </ul>
    </div><div id="menu_con">
      <div id="qh_con0" style="display: block;" onmouseout="yc(this)">
      <ul>   
      <li><a href="task.php"><span>论坛任务</span></a></li>   
      <li><a href="medal.php"><span>论坛勋章</span></a></li> 
      <li><a href="magic.php"><span>道具商店</span></a></li> 
      </ul>
      </div>  <div id="qh_con1" style="display: none;margin-left: 90px;" onmouseout="yc(this)">
      <ul>
      <li><a href="http://www.xiandog.com" target="_blank" ><span>宠物商铺</span></a></li>
      <li><a href="gift.php"><span>礼品兑换</span></a></li>
      </ul>
      </div> 
      </div>   </body>
    </html>
    这样应该可以，不过你的样式估计要改下，要不然鼠标移动的两个li之间的空格时，div就隐藏了