我要做一个 导航条  利用 DIV  和脚本 实现 鼠标滑过 就显示二级子菜单 可是弄了好几个小时 就是搞不定 ,这代码是我COPY别人的 别人都能用 怎么就我用不了呀 
这个是脚本 
<script language="javascript" type="text/javascript"> 
function qiehuan(num){ 
for(var id = 0;id <=9;id++) 

if(id==num) 

document.getElementById("qh_con"+id).style.display="block"; } 
else 

document.getElementById("qh_con"+id).style.display="none"; } 


</script> 
下面是主菜单链接代码 
<a href="http://ddd/fun_funv.jhtml?clid=4"  onmouseover="javascript:qiehuan(3)">dfdfdf </a> 和二级代码 
<div id="qh_con3" style="DISPLAY: none"> 
<table cellspacing="0" cellpadding="0" width="801" border="0"> 
              <tbody> 
                <tr> 
                  <td width="172">反复反复反复反复反复反复反复反复 </td> 
                  <td> 为什么会不好使啊  麻烦大家帮帮小弟呀 哭死。。

解决方案 »

  1.   

    这段是OPera里抄来的.经过钻研,把一些需要注意的东西写上了.以后可以直接使用.只用CSS不用JS避免了一些人JS禁用(我就是).,
    你说的问题我实在没看明白.代码片段不了.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
    <html>
    <head>
    <title>Opera Unite</title>
      <meta http-equiv="content-type" content="text/html; charset=utf-8">
      <style type='text/css'>
    /*代码重点:据实践总结:CSS不像JS,其它这些菜单是早就存在的,只是在开始把它放到别的地方:margin:0 0 0 -999em;
    然后再鼠标移到上面的,设置margin-left:0px;,同理,如果是竖的菜单一样的.主菜单是用relative,它的子菜单,才
    能相对主菜单定位,子菜单用absolute,绝对定位.所以主菜单的高和子菜单的top:值就是这个高度.
    否则子菜单在鼠标放上去,会消失.*/
    /* top menu */
    #nav ul#mainmenu {list-style:none inside none;padding:0 130px 0 26px;margin:0 0 16px -14px;
    /*background: url('/bitmaps/mainmenu/all.png') no-repeat 100% 0;*/
    height:70px;min-height:70px;height:auto !important;z-index:998;position:relative;/*位置相对,子元素可以相对它.*//**/border:1px solid #990;}
    #nav ul#mainmenu li a {max-height:45px;border:0px solid #990;}/*定义菜单横条高度.*/ /*#nav ul#mainmenu {margin:0 0 0 -14px;
    /*background: url('/bitmaps/mainmenu/all-tobg.png') no-repeat 100% 0;*
    height:65px;min-height:65px;height:auto !important;}*/ /*定义所有的nav下的li,position:relative;这样会让其子元素相对它位移.
    如果li设置了margin,没有这个,那它的子元素可能会偏,float:left;会把所有li排成排*/
    #nav li {color:#fff;
    background:#900/* url('/bitmaps/mainmenu/all.png') -60px -20px*/;
    position:relative;margin-top:20px;float:left;list-style-image: none;/**/border:0px solid #990}
    #nav li a {display:block;line-height:45px;padding:0 15px;color:#fff;text-decoration:none;white-space:nowrap;}
    /*
    #nav li a:hover, #nav li.on ul a:hover, #nav li.on a, #nav li a:focus, #nav li a.sffocus, #products #nav .menu-products, #news #nav .menu-news, #discover #nav .menu-discover, #addons #nav .menu-addons, #developer #nav .menu-developer, #support #nav .menu-support, #about #nav .menu-about, #jobs #nav .menu-jobs, #business #nav .menu-business {background:transparent url('/bitmaps/mainmenu/menu_over2.png');text-shadow: #000 0px 1px 2px;}
    */ /* Top menu dropdowns 下面这个top那能合li里的子菜单ul放到鼠标位置下面.
    margin:0 0 0 -999em;如果不设置这个值,下级菜单会显示出来,而不是在鼠标划过时显示*/
    #nav li ul {
    position:absolute;z-index:999;min-width:150px;background:#222;color:#fff;opacity:0.98;
    top:45px;/*高度要和上面的菜单一样.因为它是在li内部,而a应该是不算box,所以是相对这个li外边界值.*/
    list-style:none;border-top:1px solid #555;margin:0 0 0 -999em;padding:0;background-image:none;
    }
    /*设置li:hover时出现子菜单ul.*/
    #nav li:hover ul/*, #nav li.sfhover ul*/ {margin-left:0;}
    #nav li ul li {/*这个float:none;不设置,因为子菜单的li设定了宽度,所以hover时宽度不会覆盖整个li*/
    float:none;margin:0;padding:0;white-space:pre;border-bottom:1px solid #555;background-image:none;background:transparent;height:2.3em;}
    #nav li ul a, #nav li.on ul a {
    height:auto;color:#fff;border:0px;line-height:2.3em;display:block;background-image: none;float:none;width:80%;
    }
    #nav li ul li:hover, #nav li ul a:hover, #nav li ul a:focus, #nav li ul a.sffocus {color:#fff;background-color:#900;}
      </style>
    </head>
    <body id="company">
        <div id="nav">
          <ul id="mainmenu">
            <li><a href='#'>Home</a></li>
            <li class="on"><a href='#'>Products</a>
              <ul class="hide-mobile">
                <li><a href='#'>Opera browser</a></li>
                <li><a href='#'>Opera Mini</a></li>
                <li><a href='#'>Opera Link</a></li>
                <li><a href='#'>Opera Mobile</a></li>
                <li><a href='#'>Opera Devices</a></li>
                <li><a href='#'>Opera Mail</a></li>
                <li><a href='#'>Opera Dragonfly</a></li>
                <li><a href='#'>Opera Unite</a></li>
              </ul>
            </li>
            <li><a href='#'>Developer</a></li>
            <li><a href='#'>Support</a>
              <ul class="hide-mobile">
                <li><a href='#'>Get started</a></li>
                <li><a href='#'>Register Opera Mobile</a></li>
                <li><a href='#'>Knowledge base</a></li>
                <li><a href='#'>Online communities</a></li>
                <li><a href='#'>Reporting bugs</a></li>
                <li><a href='#'>Access Opera</a></li>
                <li><a href='#'>Premium support</a></li>
                <li><a href='#'>Documentation</a></li>
              </ul>
            </li>
            <li><a href='#'>Press</a>
              <ul class="hide-mobile">
                <li><a href='#'>Press releases</a></li>
                <li><a href='#'>Press resources</a></li>
                <li><a href='#'>Fast facts</a></li>
                <li><a href='#'>Opera in the news</a></li>
                <li><a href='#'>Reviewer's guide</a></li>
                <li><a href='#'>FAQ</a></li>
                <li><a href='#'>Press contacts</a></li>
              </ul>
            </li>
            <li><a href='#'>Company</a>
              <ul class="hide-mobile">
                <li><a href='#'>About Opera</a></li>
                <li><a href='#'>Investors</a></li>
                <li><a href='#'>State of the Mobile Web</a></li>
                <li><a href='#'>Opera on tour</a></li>
                <li><a href='#'>Job opportunities</a></li>
                <li><a href='#'>Vision</a></li>
                <li><a href='#'>Education</a></li>
                <li><a href='#'>Executive team</a></li>
                <li><a href='#'>History</a></li>
                <li><a href='#'>Contact</a></li>
              </ul>
            </li>
            <li><a href='#'>Business</a>
              <ul class="hide-mobile">
                <li><a href='#'>Overview</a></li>
                <li><a href='#'>Opera Advantage</a></li>
                <li><a href='#'>Solutions</a></li>
                <li><a href='#'>Customers</a></li>
                <li><a href='#'>Partners</a></li>
                <li><a href='#'>Gallery</a></li>
                <li><a href='#'>Awards</a></li>
                <li><a href='#'>Newsletter</a></li>
                <li><a href='#'>Contact us</a></li>
              </ul>
            </li>
          </ul>
        </div>
    </body>
    </html>
      

  2.   

    <div id="qh_con3" style="DISPLAY: none"></div>楼主你确定这种元素从0-9都存在吧?<div id="qh_con0" style="DISPLAY: none"></div>
    ...
    <div id="qh_con9" style="DISPLAY: none"></div>
      

  3.   


    <html>
    <head>
        <title>TEST</title>    <script type="text/javascript">
            function qiehuan(num) {
                for (var id = 0; id <= 3; id++) {
                    if (id == num) {
                        document.getElementById("qh_con" + id).style.display = "block";                }
                    else {
                        document.getElementById("qh_con" + id).style.display = "none";                }
                }
            } 
        </script></head>
    <body>
        <a href="http://ddd/fun_funv.jhtml?clid=4" onmouseover="javascript:qiehuan(3)">dfdfdf
        </a>
        <div id="qh_con0" style="display: none"></div>
        <div id="qh_con1" style="display: none"></div>
        <div id="qh_con2" style="display: none"></div>
        <div id="qh_con3" style="display: none">
            <table cellspacing="0" cellpadding="0" width="801" border="0">
                <tbody>
                    <tr>
                        <td width="172">
                            反复反复反复反复反复反复反复反复
                        </td>
                    </tr>
                    <tr>
                        <td width="172">
                            反复反复反复反复反复反复反复反复
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
    </html>