二级导航
我调不出来这个代码,谢谢
<!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">
   *{margin:0px;
     padding:0px;
   }
   body{font-size:12px;}
   ul{list-style:none;}
   #nav,#main{
   width:320px;
   margin:0px auto;
   border:1px solid #999;
   }
   #nav{
   line-height:24px;
   background:#666;
   }
   #nav a{
   display:block;
   width:80px;
   text-align:center;
   }
   a:link{text-decoration:none;}
   a:visited{text-decoration:none;}
   a:hover{
   text-decoration:none;
   font-weight:bold;
   background:#333;
   color:#fff;
   }
   #nav li{
   list-style:none;
   width:80px;
   float:left;
   background:#ccc;
   }
   #nav li ul{
   line-height:27px;
   display:none;
   }
   #nav li ul li{
   float:left;
   width:160px;
   background:#eee;
   }
   #nav li ul li_a{
   display:block;
   width:140px;
   text-align:left;
   padding-left:20px;
   }
   #nav li:hover ul{
   display:block;
   text-align:left;
   width:180px;
   position:absolute;
   left:auto;
   top:auto;
   }
   #main{
   height:250px;
   border-top:none;
   color:#999;
   }
  
</style>
<script type="text/javascript">
   function Set()
   {
     var menu=document.getElementById("nav").getElementsByTagName("li_a");
 for(i=0;i<menu.length;i++)
 {
    if(menu[i].className="li_a")
{
   menu[i].onmouseover=function()
   {
      this.getElementsByTagName("ul")[0].style.display="block";
  this.getElementsByTagName("ul")[0].style.width="80px;";
  this.getElementsByTagName("ul")[0].style.height="100px";
  this.getElementsByTagName("ul")[0].style.position="absolute";
   }
   menu[i].onmouseout=function()
   {
      this.getElementsByTagName("ul")[0].style.display="none";
   }
}
 }
   }
   window.onload=Set;
</script>
</head><body>
   <ul>
     <li id=""li_a><a href="#">首页</a>
        <ul>
           <li><a href="#">网站介绍</a></li>
           <li><a href="#">关于我们</a></li>
           <li><a href="#">联系我们</a></li>
          
        </ul>
     </li>
     <li id=""li_a><a href="#">产品介绍</a>
         <ul>
           <li><a href="#">网站介绍</a></li>
           <li><a href="#">关于我们</a></li>
           <li><a href="#">联系我们</a></li>
        </ul>
     </li>
     <li id=""li_a><a href="#">公司活动</a>
        <ul>
           <li><a href="#">网站介绍</a></li>
           <li><a href="#">关于我们</a></li>
           <li><a href="#">联系我们</a></li>
        </ul>
     </li>
     <li id=""li_a><a href="#">产品介绍</a>
        <ul>
           <li><a href="#">网站介绍</a></li>
           <li><a href="#">关于我们</a></li>
           <li><a href="#">联系我们</a></li>
        </ul>
     </li>
   </ul>
   <div id="main">
      页面的主体内容
   </div>
</body>
</html>

解决方案 »

  1.   

    <style type="text/css">
    .menutitle{
    cursor:pointer;
    margin-bottom: 5px;
    background-color:#ECECFF;
    color:#000000;
    width:140px;
    padding:2px;
    text-align:center;
    font-weight:bold;
    /*/*/border:1px solid #0000FF;/* */
    }.submenu{
    margin-bottom: 0.5em;
    }
    </style><script type="text/javascript">
    if (document.getElementById){ 
    document.write('<style type="text/css">\n')
    document.write('.submenu{display: none;}\n')
    document.write('</style>\n')
    }function SwitchMenu(obj){
    if(document.getElementById){
    var el = document.getElementById(obj);
    var ar = document.getElementById("masterdiv").getElementsByTagName("span"); 
    if(el.style.display != "block"){ 
    for (var i=0; i<ar.length; i++){
    if (ar[i].className=="submenu")
    ar[i].style.display = "none";
    }
    el.style.display = "block";
    }else{
    el.style.display = "none";
    }
    }
    }</script>
    <!-- Keep all menus within masterdiv-->
    <div id="masterdiv"> <div class="menutitle" onclick="SwitchMenu('sub1')">上海海洋大学</div>
    <span class="submenu" id="sub1">
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0004&schooladressid=01" target="F_id">临港新城校区</a> </span> <div class="menutitle" onclick="SwitchMenu('sub2')">复旦大学</div>
    <span class="submenu" id="sub2">
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0001&schooladressid=01" target="F_id">邯郸校区</a><br>
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0001&schooladressid=02" target="F_id">枫林校区</a><br>
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0001&schooladressid=03" target="F_id">护理学院</a><br>
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0001&schooladressid=04" target="F_id">张江校区</a> </span>
    <div class="menutitle" onclick="SwitchMenu('sub3')">上海交通大学</div>
    <span class="submenu" id="sub3">
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0002&schooladressid=01" target="F_id">法华校区</a><br>
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0002&schooladressid=02" target="F_id">徐汇校区</a><br>
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0002&schooladressid=03" target="F_id">七宝校区</a><br>
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0002&schooladressid=04" target="F_id">卢湾校区</a><br>
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0002&schooladressid=05" target="F_id">闵行校区</a> </span>
    <div class="menutitle" onclick="SwitchMenu('sub4')">同济大学</div>
    <span class="submenu" id="sub4">
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0003&schooladressid=01" target="F_id">四平路校区</a><br>
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0003&schooladressid=02" target="F_id">嘉定校区</a><br>
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0003&schooladressid=03" target="F_id">沪西校区</a><br>
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0003&schooladressid=04" target="F_id">沪北校区</a> </span>
    <div class="menutitle" onclick="SwitchMenu('sub5')">第二军医大学</div>
    <span class="submenu" id="sub5">
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0005&schooladressid=01" target="F_id">翔殷路校区</a> </span>
    <div class="menutitle" onclick="SwitchMenu('sub6')">上海外国语大学</div>
    <span class="submenu" id="sub6">
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0006&schooladressid=01" target="F_id">虹口校区</a><br>
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0006&schooladressid=02" target="F_id">松江校区</a> </span>
    <div class="menutitle" onclick="SwitchMenu('sub7')">上海财经大学</div>
    <span class="submenu" id="sub7">
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0007&schooladressid=01" target="F_id">国定路校区</a> </span>
    <div class="menutitle" onclick="SwitchMenu('sub8')">东华大学</div>
    <span class="submenu" id="sub8">
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0008&schooladressid=01" target="F_id">松江校区</a><br>
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0008&schooladressid=02" target="F_id">延安西路校区</a> </span>
    <div class="menutitle" onclick="SwitchMenu('sub9')">华东理工大学</div>
    <span class="submenu" id="sub9">
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0010&schooladressid=01" target="F_id">徐汇校区</a><br>
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0010&schooladressid=02" target="F_id">奉贤校区</a><br>
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0010&schooladressid=03" target="F_id">金山科技园区</a> </span>
    <div class="menutitle" onclick="SwitchMenu('sub10')">上海中医药大学</div>
    <span class="submenu" id="sub10">
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0011&schooladressid=01" target="F_id">蔡伦路校区</a> </span>
    <div class="menutitle" onclick="SwitchMenu('sub11')">上海师范大学</div>
    <span class="submenu" id="sub11">
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0012&schooladressid=01" target="F_id">徐汇校区</a><br>
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0012&schooladressid=02" target="F_id">奉贤校区</a> </span>
    <div class="menutitle" onclick="SwitchMenu('sub12')">上海大学</div>
    <span class="submenu" id="sub12">
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0013&schooladressid=01" target="F_id">宝山校区</a><br>
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0013&schooladressid=02" target="F_id">闸北校区</a><br>
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0013&schooladressid=03" target="F_id">嘉定校区</a><br>
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0013&schooladressid=04" target="F_id">法学院</a> </span>
    <div class="menutitle" onclick="SwitchMenu('sub13')">上海工程技术大学</div>
    <span class="submenu" id="sub13">
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0014&schooladressid=01" target="F_id">仙霞路校区</a><br>
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0014&schooladressid=02" target="F_id">松江校区</a> </span>
    <div class="menutitle" onclick="SwitchMenu('sub14')">上海第二医科大学</div>
    <span class="submenu" id="sub14">
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0015&schooladressid=01" target="F_id">重庆南路校区</a><br>
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0015&schooladressid=02" target="F_id">静安教学基地</a> </span>
    <div class="menutitle" onclick="SwitchMenu('sub15')">上海第二工业大学</div>
    <span class="submenu" id="sub15">
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0016&schooladressid=01" target="F_id">金海路校区</a> </span>
    <div class="menutitle" onclick="SwitchMenu('sub16')">上海大学</div>
    <span class="submenu" id="sub16">
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0017&schooladressid=01" target="F_id">军工路校区</a><br>
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0017&schooladressid=02" target="F_id">复兴中路校区</a><br>
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0017&schooladressid=03" target="F_id">水丰路校区</a><br>
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0017&schooladressid=04" target="F_id">营口路校区</a><br>
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0017&schooladressid=05" target="F_id">南汇校区</a> </span>
    <div class="menutitle" onclick="SwitchMenu('sub17')">上海电视大学</div>
    <span class="submenu" id="sub17">
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0018&schooladressid=01" target="F_id">国顺路校区</a> </span>
    <div class="menutitle" onclick="SwitchMenu('sub18')">上海海事大学</div>
    <span class="submenu" id="sub18">
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0019&schooladressid=01" target="F_id">民生路校区</a><br>
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0019&schooladressid=02" target="F_id">东校区(港湾学校)</a><br>
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0019&schooladressid=03" target="F_id">临港新校区</a><br>
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0019&schooladressid=04" target="F_id">海华校区</a> </span>
    <div class="menutitle" onclick="SwitchMenu('sub19')">复旦大学医学院</div>
    <span class="submenu" id="sub19">
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0020&schooladressid=01" target="F_id">枫林校区</a> </span>
    <div class="menutitle" onclick="SwitchMenu('sub20')">上海应用技术学院</div>
    <span class="submenu" id="sub20">
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0021&schooladressid=01" target="F_id">漕宝路校区</a><br>
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0021&schooladressid=02" target="F_id">奉贤校区</a> </span>
    <div class="menutitle" onclick="SwitchMenu('sub21')">上海电力学院</div>
    <span class="submenu" id="sub21">
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0022&schooladressid=01" target="F_id">平凉校区</a><br>
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0022&schooladressid=02" target="F_id">南汇校区</a> </span>
    <div class="menutitle" onclick="SwitchMenu('sub22')">上海音乐学院</div>
    <span class="submenu" id="sub22">
    - <a href="/schooldinner/school/schoolpage.aspx?schoolid=0023&schooladressid=01" target="F_id">徐汇校区</a> </span>JS为网档品 
      

  2.   

    function Set()
      {
      var menu=document.getElementById("nav").getElementsByTagName("li_a");
    for(i=0;i<menu.length;i++)
    {
    if(menu[i].className=="li_a") // 不是=
    {
    (function(i){
    menu[i].onmouseover=function()
    {
    this.getElementsByTagName("ul")[0].style.display="block";
    this.getElementsByTagName("ul")[0].style.width="80px;";
    this.getElementsByTagName("ul")[0].style.height="100px";
    this.getElementsByTagName("ul")[0].style.position="absolute";
    }
    menu[i].onmouseout=function()
    {
    this.getElementsByTagName("ul")[0].style.display="none";
    }
    })(i); // js 闭包
    }
    }
      }