想实现一个栏目上下滑动效果，可是怎么都是左右的
0
[待解决问题]
想实现一个栏目上下滑动效果，可是怎么都是左右的，各位帮我看看哪里出了问题
<html>
<head>
<title>鼠标滑动菜单 站长学院www.pigzz.com</title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<style type="text/css">
<!--
body {
margin: 0px;
}
#header {
background-color: #ffffff;
margin: 0px;
padding: 0px;
border: 1px solid #CCCCCC;
font-size: 12px;
}
#menu {
margin: 0px;
padding: 0px;
list-style:none;
}
#menu li {
list-style:none;
display: block;
width: 137px;
height: 23px;
text-align: center;
float: left; //默认为左边第一个打开
margin: 0px;
padding-right: 0px;
padding-left: 0px;
line-height: 23px; height: 23px
}
.sec1 { background-image: url(http://www.codefans.net/jscss/demoimg/200904/btn_bg.gif);float: left;list-style-type: none; height: 23px;border-right:1px solid #B0BEC7;border-bottom:1px solid #B0BEC7;}
.sec2 { background: url(http://www.codefans.net/jscss/demoimg/200904/btn_select.gif);position: relative; height: 23px;border-right:1px solid #B0BEC7;border-bottom:1px solid #FFFFFF;color: #FF0000}
.block { display: block;list-style:none;}
.unblock { display: none;list-style:none;}
.pic img {
padding: 3px;
border: 1px solid #ccc;
}
#right { width:525px; margin:auto auto auto 30px; padding:0px; float:left;border-top:1px solid #B0BEC7;border-left:1px solid #B0BEC7;border-right:1px solid #B0BEC7;border-bottom:1px solid #B0BEC7;}
-->
</style>
</head>
<body>
<script language=javascript>
function secBoard(n)
{
for(i=0;i<menu.childNodes.length;i++)
menu.childNodes[i].className="sec1";
menu.childNodes[n].className="sec2";
for(i=0;i<main.childNodes.length;i++)
main.childNodes[i].style.display="none";
main.childNodes[n].style.display="block";
}
</script>
<div id="header">
<ul id="menu">
<li onMouseOver="secBoard(0)" class="sec2">Indexs</li>
<li onMouseOver="secBoard(1)" class="sec1">ASP</li>
<li onMouseOver="secBoard(2)" class="sec1">PHP</li>
<li onMouseOver="secBoard(3)" class="sec1">EXTJS</li>
<li onMouseOver="secBoard(4)" class="sec1">JSP</li>
</ul>
</div>
<div id="right">
<ul id="main">
<li class="block">网站索引</li>
<li class="unblock">ASP的内容</li>
<li class="unblock">PHP的内容</li>
<li class="unblock">EXTJS的内容</li>
<li class="unblock">JSP的内容</li>
</ul>
</div>
</body>
</html>
;float){kind=link}
;position){kind=link}
所有回答(1)
0
