隐藏li

现在与我想象中有点出入求帮手修改下（理想中:<li>里面内容是隐藏的，当鼠标移动到导航条才会弹出。）
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#body{margin:0px;}
#char{
background-color:#66FF66;
    width:811px;
    height:570px;
    margin:auto;
}
#head {
    width:811px;
    height:67px;
}
#head_a {
    background-image:url(images/1_02.gif.gif);
    width:209px;
    height:67px;
}
#head_b {
background-color:#FFFFFF;
    float:right;
    width:602px;
    height:67px;
    margin-top:-67px;
}
#tit{
width:100%;
height:25px;
line-height:25px;
}
#tit h3{
margin:0px;
padding:0px;
width:88px;
background:#ccc;
float:left;
line-height:25px;
text-align:center;
border:1px solid white;
font-size:12px;
color:white;
}
#content{
width:100%;
height:175px;
background:#888;
}
#content div{
display:none;
}
#content .one{
display:block;
}
#tit .titin{
border:2px solid #888;
background:#888;
}
</style>
</head>
<body>
<div id="char">
<div id="head">
<div id="head_a"></div>
<div id="head_b"></div>
</div>
<div id="tit">
<h3 onmouseover="show(0)" class="titin">首页</h3>
<h3 onmouseover="show(1)">关于我们</h3>
<h3 onmouseover="show(2)">新闻中心</h3>
<h3 onmouseover="show(3)">产品中心</h3>
</div>
<div id="content">
<div class="one">
<ul>
<li>aaas</li>
<li>aaag</li>
<li>aaasg</li>
<li>aaaaa</li>
<li>aaaaa</li>
</ul>
</div>
<div>
<ul>
<li>bbbbb</li>
<li>bbbbbbb</li>
</ul>
</div>
<div>
<ul>
<li>cccc</li>
</ul>
</div>
<div>
<ul>
<li>cccc</li>
</ul>
</div> </div>

</div>
<script>
var h3os=document.getElementsByTagName("h3");
var cdivs=document.getElementById("content").getElementsByTagName("div");

function  show(num){
for(var i=0; i<h3os.length; i++){
 if(i==num){
  h3os[num].className="titin";
cdivs[num].style.display="block"
 }else{
  h3os[i].className="";
cdivs[i].style.display="none";
 
 }

}

}
</script>
</body>
</html>

解决方案 »

  1.   

    #content .one{
    display:none;
    }试试
      

  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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    #body{margin:0px;}
    #char{
    background-color:#66FF66;
      width:811px;
      height:570px;
      margin:auto;
    }
    #head {
      width:811px;
      height:67px;
    }
    #head_a {
      background-image:url(images/1_02.gif.gif);
      width:209px;
      height:67px;
    }
    #head_b {
    background-color:#FFFFFF;
      float:right;
      width:602px;
      height:67px;
      margin-top:-67px;
    }
    #tit{ 
    width:100%;
    height:25px;
    line-height:25px;
    }
    #tit h3{
    margin:0px;
    padding:0px;
    width:88px;
    background:#ccc;
    float:left;
    line-height:25px;
    text-align:center;
    border:1px solid white;
    font-size:12px;
    color:white;
    }
    #content{
    width:100%;
    height:175px;}
    #content div{
    display:none;
    }
    #content .one{}
    #tit .titin{
    border:2px solid #888;
    background:#888;
    }
    </style>
    </head>
    <body>
    <div id="char">
    <div id="head">
    <div id="head_a"></div>
    <div id="head_b"></div>
    </div>
    <div id="tit">
    <h3 onmouseover="show(0)">首页</h3>
    <h3 onmouseover="show(1)">关于我们</h3>
    <h3 onmouseover="show(2)">新闻中心</h3>
    <h3 onmouseover="show(3)">产品中心</h3>
    </div>
    <div id="content">
    <div class="one">
    <ul>
    <li>aaas</li>
    <li>aaag</li>
    <li>aaasg</li>
    <li>aaaaa</li>
    <li>aaaaa</li>
    </ul>
    </div>
    <div>
    <ul>
    <li>bbbbb</li>
    <li>bbbbbbb</li>
    </ul>
    </div>
    <div>
    <ul>
    <li>cccc</li>
    </ul>
    </div>
    <div>
    <ul>
    <li>cccc1</li>
    </ul>
    </div></div></div>
    <script>
    var h3os=document.getElementsByTagName("h3");
    var cdivs=document.getElementById("content").getElementsByTagName("div");function show(num){
    for(var i=0; i<h3os.length; i++){
    if(i==num){
    h3os[num].className="titin";
    cdivs[num].style.display="block"
    }else{
    h3os[i].className="";
    cdivs[i].style.display="none";
      
    }}}
    </script>
    </body>
    </html>
    这个意思？
      

  3.   

    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    #body {
    margin:0px;
    }
    #char {
    background-color:#66FF66;
    width:811px;
    height:570px;
    margin:auto;
    }
    #head {
    width:811px;
    height:67px;
    }
    #head_a {
    background-image:url(images/1_02.gif.gif);
    width:209px;
    height:67px;
    }
    #head_b {
    background-color:#FFFFFF;
    float:right;
    width:602px;
    height:67px;
    margin-top:-67px;
    }
    #tit {
    width:100%;
    height:25px;
    line-height:25px;
    }
    #tit h3 {
    margin:0px;
    padding:0px;
    width:88px;
    background:#ccc;
    float:left;
    line-height:25px;
    text-align:center;
    border:1px solid white;
    font-size:12px;
    color:white;
    }
    #content {
    width:100%;
    height:175px;
    background:#888;
    }
    #content div {
    display:none;
    }
    #content .one {
    display:block;
    }
    #tit .titin {
    border:2px solid #888;
    background:#888;
    }
    </style>
    </head>
    <body>
    <div id="char">
      <div id="head">
        <div id="head_a"></div>
        <div id="head_b"></div>
      </div>
      <div id="tit">
        <h3 onmouseover="show(0)" class="titin">首页</h3>
        <h3 onmouseover="show(1)">关于我们</h3>
        <h3 onmouseover="show(2)">新闻中心</h3>
        <h3 onmouseover="show(3)">产品中心</h3>
      </div>
      <div id="content">
        <div class="one">
          <ul>
            <li>aaas</li>
            <li>aaag</li>
            <li>aaasg</li>
            <li>aaaaa</li>
            <li>aaaaa</li>
          </ul>
        </div>
        <div>
          <ul>
            <li>bbbbb</li>
            <li>bbbbbbb</li>
          </ul>
        </div>
        <div>
          <ul>
            <li>cccc</li>
          </ul>
        </div>
        <div>
          <ul>
            <li>cccc</li>
          </ul>
        </div>
      </div>
    </div>
    <script>
    document.getElementById('content').style.display = 'none';
    var h3os=document.getElementsByTagName("h3");
    var cdivs=document.getElementById("content").getElementsByTagName("div");function show(num) {
    document.getElementById('content').style.display = 'block';
    for (var i = 0; i < h3os.length; i ++) {
    h3os[i].className = '';
    cdivs[i].style.display = 'none';
    }
    h3os[num].className = 'titin';
    cdivs[num].style.display = 'block';
    }
    document.getElementById('content').onmouseover = function() { this.style.display = 'block'; }
    document.getElementById('content').onmouseout = function() { this.style.display = 'none'; }
    </script>
    </body>
    </html>
      

  4.   

    你们俩的代码都有点毛病
    1：是做出了我移动到导航条才弹出效果，但是鼠标移开不会收回去！
    2：内容位置不准确(http://d.lanrentuku.com/down/js/daohang-847/)我要这种效果！！