水平二级菜单_恋婷滑动门
水平二级菜单（收集于网络）
Code1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2
<html xmlns="http://www.w3.org/1999/xhtml">3
<head>4
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />5
<title>▒ 恋婷滑动门技术</title>6
<style media="screen" type="text/css">7
<!--8
9
html,body
{margin:0;padding:0;over-flow:hidden;height:100%;width:100%;}10
UL{list-style-type:none; margin:0px;}11
12
/**//* 标准盒模型 */13
/**//*问题:1、不能改字体大小*/14
15
.w936{margin:2.5em;padding:0;clear:both;width:936px;/**//*这里调整整个滑动门的宽度*/font-size:12px;16
/**//*border:#CC3366 solid 1px;*//**//*用来检测效果*/}17
/**//* TAB 切换效果 */18
.tb_{background:url(image/bg.gif) repeat-x bottom #E6F2FF;padding-top:5px;}19
.tb_ ul{height:24px;margin:0;padding-left:1em;}20
.tb_ li{float:left;height: 24px;line-height:1.9;width: 60px;cursor:pointer; /**//**/margin-right:1em;padding:0;}21
.tb_ a{ text-decoration:none;display:block;font-weight:bold;text-align:center;}22
/**//* 用于控制显示与隐藏的css类 */23
.normaltab { background-image:url(image/normal_tb.gif); background-repeat: no-repeat; color:#1F3A87 ;}24
.hovertab { background-image:url(image/hover_tb.gif); background-repeat: no-repeat; color:#1F3A87; font-weight:bold }25
26
.ctt{height:auto;padding:6px;clear:both;border:1px solid #064ca1;border-top:0;text-align:left;}27
28
.clear{clear:both;}29
.dis{display:block;}30
.undis{display:none;}31
.dis ul{float:left;/**//*margin-left:0.5em;padding-left:1em;*/margin:0;padding:0;}32
.dis li{float:left; margin-left:1em;}33
.dis a{color:#3333CC;}34
/**//*.undis ul{float:left;}35
.undis li{float:left;margin-left:1em;}*/36
-->37
</style>38
<script type="text/javascript" language="javascript">39
//<!CDATA[40
function g(o){return document.getElementById(o);}41
function HoverLi(n){42
//如果有N个标签,就将i<=N;43
//本功能非常OK,兼容IE7,FF,IE6;http://www.xiaogezi.cn/ [小鸽子]系列44
for(var i=1;i<=6;i++)45
{46
g('tb_'+i).className='normaltab';47
g('tbc_0'+i).className='undis';48
}49
g('tbc_0'+n).className='dis';g('tb_'+n).className='hovertab';50
}51
//如果要做成点击后再转到请将<li>中的onmouseover 改成 onclick;52
//]]>53
</script>54
</head>55
<body>56
<div class="w936">57
<div id="tb_" class="tb_">58
<ul>59
<li id="tb_1" class="hovertab" onmouseover="x:HoverLi(1);"><a href="#">流行</a></li>60
<li id="tb_2" class="normaltab" onmouseover="i:HoverLi(2);"><a href="#">美女</a></li>61
<li id="tb_3" class="normaltab" onmouseover="a:HoverLi(3);"><a href="#">平面</a></li>62
<li id="tb_4" class="normaltab" onmouseover="o:HoverLi(4);"><a href="#">网络</a></li>63
<li id="tb_5" class="normaltab" onmouseover="g:HoverLi(5);"><a href="#">恋爱</a></li>64
<li id="tb_6" class="normaltab" onmouseover="z:HoverLi(6);"><a href="#">Q鸽</a></li>65
</ul>66
</div>67
<div class="ctt">68
<div class="dis" id="tbc_01">69
<ul>70
<li><a href="#">123</a></li>71
<li><a href="#">132</a></li>72
<li><a href="#">133</a></li> 73
</ul><div class="clear"></div>74
</div>75
<div class="undis" id="tbc_02">76
<ul>77
<li><a href="#">222</a></li>78
<li><a href="#">2345</a></li>79
<li><a href="#">23drt</a></li> 80
</ul><div class="clear"></div>81
</div>82
<div class="undis" id="tbc_03">83
<ul>84
<li><a href="#">345</a></li>85
<li><a href="#">3f3r33r</a></li>86
<li><a href="#">3dd33</a></li> 87
</ul><div class="clear"></div>88
</div>89
<div class="undis" id="tbc_04">90
<ul>91
<li><a href="#">433</a></li>92
<li><a href="#">4444</a></li>93
<li><a href="#">4567</a></li> 94
</ul><div class="clear"></div>95
</div>96
<div class="undis" id="tbc_05">97
<ul>98
<li><a href="#">511</a></li>99
<li><a href="#">542</a></li>100
<li><a href="#">55553</a></li> 101
</ul><div class="clear"></div>102
</div>103
<div class="undis" id="tbc_06">104
<ul>105
<li><a href="#">61</a></li>106
<li><a href="#">678</a></li>107
<li><a href="#">6666</a></li> 108
</ul><div class="clear"></div>109
</div>110
</div>111
</div>112
</body>113
</html> 
浙公网安备 33010602011771号