首页 新闻 搜索 专区 学院

想实现一个栏目上下滑动效果,可是怎么都是左右的

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>

心语2012的主页 心语2012 | 菜鸟二级 | 园豆:216
提问于:2012-09-04 22:24
< >
分享
所有回答(1)
0
chenping2008 | 园豆:9836 (大侠五级) | 2012-09-05 09:08
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册