我的二级菜单(css),在一个页面上为什么就能在一个位置用?
这是菜单代码:
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head><body><div id="slidingBlock">
<script language="javascript">
function switchmodTag(modtag,modcontent,modk) {
for(i=1; i <4; i++) {
if (i==modk) {
document.getElementById(modtag+i).className="menuOn";document.getElementById(modcontent+i).className="slidingList";}
else {
document.getElementById(modtag+i).className="menuNo";document.getElementById(modcontent+i).className="slidingList_none";}
}
}
</script>
<h4 class="menuOn" id="mod1" onmouseover="switchmodTag('mod','slidingList','1');this.blur();">
最近更新</h4>
<h4 class="menuNo" id="mod2" onmouseover="switchmodTag('mod','slidingList','2');this.blur();">
近期推荐</h4>
<h4 class="menuNo" id="mod3" onmouseover="switchmodTag('mod','slidingList','3');this.blur();">
热门点击</h4>
<div class="slidingList" id="slidingList1">
<ul>
<li class="one"><span>1</span><a href="http://www.jscode.cn">第一个的信息第一个的信息</a></li>
<li class="one"><span>2</span><a href="http://www.html.org.cn">第一个的信息第一个的信息</a></li>
<li class="one"><span>3</span><a href="http://www.luwei.net.cn">第一个的信息第一个的信息信息信息</a></li>
<li class="one"><span>4</span><a href="http://www.jscode.cn">第一个的信息第一个的信息</a></li>
<li class="one"><span>5</span><a href="http://www.jscode.cn">第一个的信息第一个的信息</a></li>
</ul>
</div>
<div class="slidingList_none" id="slidingList2">
<ul>
<li class="two"><span>1</span><a href="http://www.jscode.cn">第二个的信息第二个的信息</a></li>
<li class="two"><span>2</span><a href="http://www.html.org.cn">第二个的信息第二个的信息</a></li>
<li class="two"><span>3</span><a href="http://www.luwei.net.cn">第二个的信息第二个的信息信息信息</a></li>
<li class="two"><span>4</span><a href="http://www.jscode.cn">第二个的信息第二个的信息</a></li>
<li class="two"><span>5</span><a href="http://www.jscode.cn">第二个的信息第二个的信息</a></li>
<li class="two"><span>6</span><a href="http://www.jscode.cn">第二个的信息第二个的信息</a></li>
<li class="two"><span>7</span><a href="http://www.jscode.cn">第二个的信息第二个的信息</a></li>
</ul>
</div>
<div class="slidingList_none" id="slidingList3">
<ul>
<li class="thr"><span>1</span><a href="http://www.jscode.cn">第三个的信息第三个的信息</a></li>
<li class="thr"><span>2</span><a href="http://www.html.org.cn">第三个的信息第三个的信息</a></li>
<li class="thr"><span>3</span><a href="http://www.luwei.net.cn">第三个的信息第三个的信息信息信息</a></li>
<li class="thr"><span>4</span><a href="http://www.jscode.cn">第三个的信息第三个的信息</a></li>
<li class="thr"><span>5</span><a href="http://www.jscode.cn">第三个的信息第三个的信息</a></li>
</ul>
</div>
</div>
<p> </p>
<p> </p>
<table width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div id="slidingBlock">
<script language="javascript">
function switchmodTag(modtag,modcontent,modk) {
for(i=1; i <4; i++) {
if (i==modk) {
document.getElementById(modtag+i).className="menuOn";document.getElementById(modcontent+i).className="slidingList";}
else {
document.getElementById(modtag+i).className="menuNo";document.getElementById(modcontent+i).className="slidingList_none";}
}
}
</script>
<h5 class="menuOn" id="mod3" onmouseover="switchmodTag('mod','slidingList','1');this.blur();">
最近更新</h4>
<h5 class="menuNo" id="mod4" onmouseover="switchmodTag('mod','slidingList','2');this.blur();">
近期推荐</h4>
<h5 class="menuNo" id="mod5" onmouseover="switchmodTag('mod','slidingList','3');this.blur();">
热门点击</h4>
<div class="slidingList" id="slidingList1">
<ul>
<li class="one"><span>1</span><a href="http://www.jscode.cn">第一个的信息第一个的信息</a></li>
<li class="one"><span>2</span><a href="http://www.html.org.cn">第一个的信息第一个的信息</a></li>
<li class="one"><span>3</span><a href="http://www.luwei.net.cn">第一个的信息第一个的信息信息信息</a></li>
<li class="one"><span>4</span><a href="http://www.jscode.cn">第一个的信息第一个的信息</a></li>
<li class="one"><span>5</span><a href="http://www.jscode.cn">第一个的信息第一个的信息</a></li>
</ul>
</div>
<div class="slidingList_none" id="slidingList2">
<ul>
<li class="two"><span>1</span><a href="http://www.jscode.cn">第二个的信息第二个的信息</a></li>
<li class="two"><span>2</span><a href="http://www.html.org.cn">第二个的信息第二个的信息</a></li>
<li class="two"><span>3</span><a href="http://www.luwei.net.cn">第二个的信息第二个的信息信息信息</a></li>
<li class="two"><span>4</span><a href="http://www.jscode.cn">第二个的信息第二个的信息</a></li>
<li class="two"><span>5</span><a href="http://www.jscode.cn">第二个的信息第二个的信息</a></li>
<li class="two"><span>6</span><a href="http://www.jscode.cn">第二个的信息第二个的信息</a></li>
<li class="two"><span>7</span><a href="http://www.jscode.cn">第二个的信息第二个的信息</a></li>
</ul>
</div>
<div class="slidingList_none" id="slidingList3">
<ul>
<li class="thr"><span>1</span><a href="http://www.jscode.cn">第三个的信息第三个的信息</a></li>
<li class="thr"><span>2</span><a href="http://www.html.org.cn">第三个的信息第三个的信息</a></li>
<li class="thr"><span>3</span><a href="http://www.luwei.net.cn">第三个的信息第三个的信息信息信息</a></li>
<li class="thr"><span>4</span><a href="http://www.jscode.cn">第三个的信息第三个的信息</a></li>
<li class="thr"><span>5</span><a href="http://www.jscode.cn">第三个的信息第三个的信息</a></li>
</ul>
</div>
</div></td>
</tr>
</table>
这是css代码:
#slidingBlock {
width:246px;border:1px #95CF92 solid;padding:1px;over-flow:hidden
}
#slidingBlock h4 {
float:left;width:82px;height:30px;line-height:25px;text-align:center;font-size:12px;over-flow:hidden
}
#slidingBlock h4.menuNo {
font-weight:normal;color:#333333;background:url(images/slidingMenuLine.gif) repeat-x
}
#slidingBlock h4.menuOn {
font-weight:bold;color:#ffffff;background:url(images/slidingMenu.gif) no-repeat
}
#slidingBlock DIV.slidingList_none {
display:none
}
#slidingBlock DIV.slidingList {
margin:0px;padding:5px;height:150px
}
#slidingBlock DIV.slidingList ul {
margin:0px;padding:0px
}
#slidingBlock DIV.slidingList li {
height:20px;line-height:20px
}
#slidingBlock DIV.slidingList li span {
font-size:12px;font-weight:normal;color:#ffffff;padding-left:4px;padding-right:8px
}
#slidingBlock DIV.slidingList li.one {
background:url(images/slidingTag1.gif) no-repeat
}
#slidingBlock DIV.slidingList li.two {
background:url(images/slidingTag2.gif) no-repeat
}
#slidingBlock DIV.slidingList li.thr {
background:url(images/slidingTag3.gif) no-repeat
}
这是菜单代码:
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head><body><div id="slidingBlock">
<script language="javascript">
function switchmodTag(modtag,modcontent,modk) {
for(i=1; i <4; i++) {
if (i==modk) {
document.getElementById(modtag+i).className="menuOn";document.getElementById(modcontent+i).className="slidingList";}
else {
document.getElementById(modtag+i).className="menuNo";document.getElementById(modcontent+i).className="slidingList_none";}
}
}
</script>
<h4 class="menuOn" id="mod1" onmouseover="switchmodTag('mod','slidingList','1');this.blur();">
最近更新</h4>
<h4 class="menuNo" id="mod2" onmouseover="switchmodTag('mod','slidingList','2');this.blur();">
近期推荐</h4>
<h4 class="menuNo" id="mod3" onmouseover="switchmodTag('mod','slidingList','3');this.blur();">
热门点击</h4>
<div class="slidingList" id="slidingList1">
<ul>
<li class="one"><span>1</span><a href="http://www.jscode.cn">第一个的信息第一个的信息</a></li>
<li class="one"><span>2</span><a href="http://www.html.org.cn">第一个的信息第一个的信息</a></li>
<li class="one"><span>3</span><a href="http://www.luwei.net.cn">第一个的信息第一个的信息信息信息</a></li>
<li class="one"><span>4</span><a href="http://www.jscode.cn">第一个的信息第一个的信息</a></li>
<li class="one"><span>5</span><a href="http://www.jscode.cn">第一个的信息第一个的信息</a></li>
</ul>
</div>
<div class="slidingList_none" id="slidingList2">
<ul>
<li class="two"><span>1</span><a href="http://www.jscode.cn">第二个的信息第二个的信息</a></li>
<li class="two"><span>2</span><a href="http://www.html.org.cn">第二个的信息第二个的信息</a></li>
<li class="two"><span>3</span><a href="http://www.luwei.net.cn">第二个的信息第二个的信息信息信息</a></li>
<li class="two"><span>4</span><a href="http://www.jscode.cn">第二个的信息第二个的信息</a></li>
<li class="two"><span>5</span><a href="http://www.jscode.cn">第二个的信息第二个的信息</a></li>
<li class="two"><span>6</span><a href="http://www.jscode.cn">第二个的信息第二个的信息</a></li>
<li class="two"><span>7</span><a href="http://www.jscode.cn">第二个的信息第二个的信息</a></li>
</ul>
</div>
<div class="slidingList_none" id="slidingList3">
<ul>
<li class="thr"><span>1</span><a href="http://www.jscode.cn">第三个的信息第三个的信息</a></li>
<li class="thr"><span>2</span><a href="http://www.html.org.cn">第三个的信息第三个的信息</a></li>
<li class="thr"><span>3</span><a href="http://www.luwei.net.cn">第三个的信息第三个的信息信息信息</a></li>
<li class="thr"><span>4</span><a href="http://www.jscode.cn">第三个的信息第三个的信息</a></li>
<li class="thr"><span>5</span><a href="http://www.jscode.cn">第三个的信息第三个的信息</a></li>
</ul>
</div>
</div>
<p> </p>
<p> </p>
<table width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div id="slidingBlock">
<script language="javascript">
function switchmodTag(modtag,modcontent,modk) {
for(i=1; i <4; i++) {
if (i==modk) {
document.getElementById(modtag+i).className="menuOn";document.getElementById(modcontent+i).className="slidingList";}
else {
document.getElementById(modtag+i).className="menuNo";document.getElementById(modcontent+i).className="slidingList_none";}
}
}
</script>
<h5 class="menuOn" id="mod3" onmouseover="switchmodTag('mod','slidingList','1');this.blur();">
最近更新</h4>
<h5 class="menuNo" id="mod4" onmouseover="switchmodTag('mod','slidingList','2');this.blur();">
近期推荐</h4>
<h5 class="menuNo" id="mod5" onmouseover="switchmodTag('mod','slidingList','3');this.blur();">
热门点击</h4>
<div class="slidingList" id="slidingList1">
<ul>
<li class="one"><span>1</span><a href="http://www.jscode.cn">第一个的信息第一个的信息</a></li>
<li class="one"><span>2</span><a href="http://www.html.org.cn">第一个的信息第一个的信息</a></li>
<li class="one"><span>3</span><a href="http://www.luwei.net.cn">第一个的信息第一个的信息信息信息</a></li>
<li class="one"><span>4</span><a href="http://www.jscode.cn">第一个的信息第一个的信息</a></li>
<li class="one"><span>5</span><a href="http://www.jscode.cn">第一个的信息第一个的信息</a></li>
</ul>
</div>
<div class="slidingList_none" id="slidingList2">
<ul>
<li class="two"><span>1</span><a href="http://www.jscode.cn">第二个的信息第二个的信息</a></li>
<li class="two"><span>2</span><a href="http://www.html.org.cn">第二个的信息第二个的信息</a></li>
<li class="two"><span>3</span><a href="http://www.luwei.net.cn">第二个的信息第二个的信息信息信息</a></li>
<li class="two"><span>4</span><a href="http://www.jscode.cn">第二个的信息第二个的信息</a></li>
<li class="two"><span>5</span><a href="http://www.jscode.cn">第二个的信息第二个的信息</a></li>
<li class="two"><span>6</span><a href="http://www.jscode.cn">第二个的信息第二个的信息</a></li>
<li class="two"><span>7</span><a href="http://www.jscode.cn">第二个的信息第二个的信息</a></li>
</ul>
</div>
<div class="slidingList_none" id="slidingList3">
<ul>
<li class="thr"><span>1</span><a href="http://www.jscode.cn">第三个的信息第三个的信息</a></li>
<li class="thr"><span>2</span><a href="http://www.html.org.cn">第三个的信息第三个的信息</a></li>
<li class="thr"><span>3</span><a href="http://www.luwei.net.cn">第三个的信息第三个的信息信息信息</a></li>
<li class="thr"><span>4</span><a href="http://www.jscode.cn">第三个的信息第三个的信息</a></li>
<li class="thr"><span>5</span><a href="http://www.jscode.cn">第三个的信息第三个的信息</a></li>
</ul>
</div>
</div></td>
</tr>
</table>
这是css代码:
#slidingBlock {
width:246px;border:1px #95CF92 solid;padding:1px;over-flow:hidden
}
#slidingBlock h4 {
float:left;width:82px;height:30px;line-height:25px;text-align:center;font-size:12px;over-flow:hidden
}
#slidingBlock h4.menuNo {
font-weight:normal;color:#333333;background:url(images/slidingMenuLine.gif) repeat-x
}
#slidingBlock h4.menuOn {
font-weight:bold;color:#ffffff;background:url(images/slidingMenu.gif) no-repeat
}
#slidingBlock DIV.slidingList_none {
display:none
}
#slidingBlock DIV.slidingList {
margin:0px;padding:5px;height:150px
}
#slidingBlock DIV.slidingList ul {
margin:0px;padding:0px
}
#slidingBlock DIV.slidingList li {
height:20px;line-height:20px
}
#slidingBlock DIV.slidingList li span {
font-size:12px;font-weight:normal;color:#ffffff;padding-left:4px;padding-right:8px
}
#slidingBlock DIV.slidingList li.one {
background:url(images/slidingTag1.gif) no-repeat
}
#slidingBlock DIV.slidingList li.two {
background:url(images/slidingTag2.gif) no-repeat
}
#slidingBlock DIV.slidingList li.thr {
background:url(images/slidingTag3.gif) no-repeat
}
<!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 charset="bg2312" />
<title>滑动TAB</title>
<style type="text/css"> *{padding:0;margin:0;font-size:12px;}
ul{list-style:none;}
.tabBox{
width:300px;
margin:55px auto;
}
.tabMenu{
height:27px;
width:295px;
border-left:1px solid #ccc;
border-top:1px solid #ccc;
}
.tabMenu li{
float:left;
height:27px;
width:58px;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
text-align:center;
line-height:27px;
background:#eee;
}
.tabMenu .cli{
background:#fff;
}
#tabContent{
border:1px solid #ccc;
border-top-width:0;
width:294px;
}
#tabContent .hidden{
display:none;
}
</style>
</head>
<body>
<script type='text/javascript'>
function tabChange(obj,id){
var tabLi = obj.parentNode.getElementsByTagName("li");
var tabContents = document.getElementById(id).getElementsByTagName("ul");
for(var i=0; i<tabContents.length; i++){
if(obj == tabLi[i]){
tabLi[i].className = "cli";
tabContents[i].className = "";
}
else{
tabLi[i].className="";
tabContents[i].className = "hidden";
}
}
}
</script>
<div class="tabBox">
<div class="tabMenu">
<ul>
<li onmouseover="tabChange(this,'tabContent')" class="cli">新闻</li>
<li onmouseover="tabChange(this,'tabContent')">游戏</li>
<li onmouseover="tabChange(this,'tabContent')">音乐</li>
<li onmouseover="tabChange(this,'tabContent')">论坛</li>
<li onmouseover="tabChange(this,'tabContent')">聊天</li>
</ul>
</div> <div id="tabContent">
<ul>
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
</ul>
<ul class="hidden">
<li><a href="#">2222222222222222</a></li>
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
</ul>
<ul class="hidden">
<li><a href="#">3333333333333333</a></li>
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
</ul>
<ul class="hidden">
<li><a href="#">44444444444444444</a></li>
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
</ul>
<ul class="hidden">
<li><a href="#">5555555555555555</a></li>
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
</ul>
</div>
</div>
</body>
</html>
http://blog.csdn.net/IBM_hoojo/archive/2010/07/28/5772017.aspx