二级导航
我调不出来这个代码,谢谢
<!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>
我调不出来这个代码,谢谢
<!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>
.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为网档品
{
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 闭包
}
}
}