CSDN的个人空间的右上部的横向的二级下拉菜单是怎么做的啊？

它是用ul和li标签做的。但我把它的代码Copy下来后是个竖的，怎么能把它横过来的，从而实现它那样的状态呢

解决方案 »

  1.   

    to:楼上找了的啊，把所的*.js文件都下下来了，就是有些Class找不到。烦
      

  2.   

    <HTML>
     <HEAD>
      <TITLE> 横向菜单 </TITLE> 
      <style>
      .MainMenuFloatLeft{float:left;}
      </style>
     </HEAD> <BODY>
      <script type="text/javascript">
    function setTab(m,n){
    var tli=document.getElementById("menu"+m).getElementsByTagName("li");
    var mli=document.getElementById("main"+m).getElementsByTagName("ul");
    for(i=0;i<tli.length;i++){
    tli[i].className=i==n?"MainMenuFloatLeft":"";
    mli[i].style.display=i==n?"block":"none";
    }
    }
    </script>
    <table cellPadding="0" align="center" border="0" cellSpacing="0">
    <tr>
    <td bgcolor="#efefd0">
    <div>
        <ul id="menu0">
            <!-- 这里的样式一定要用"style"格式，不能用"class="格式。不然移动Mouse时不能定住浮动成一行的样式 -->
            <li style="float:left;"><a href="#"><span>我要 |</span></a></li>
            <li style="float:left;" onmouseover="setTab(0,1)"><a href="#"><span>去社区 |</span></a></li>
            <li style="float:left;" onmouseover="setTab(0,2)"><a href="#"><span>写博客 |</span></a></li>
            <li style="float:left;" onmouseover="setTab(0,3)"><a href="#"><span>看图书 |</span></a></li>
            <li style="float:left;" onmouseover="setTab(0,4)"><a href="#"><span>下资源 |</span></a></li>
            <li style="float:left;" onmouseover="setTab(0,5)"><a href="#"><span>去群组 |</span></a></li>
            <li style="float:left;" onmouseover="setTab(0,6)"><a href="#"><span>找工作 |</span></a></li>
            <li style="float:left;" onmouseover="setTab(0,7)"><a href="#"><span>接项目 |</span></a></li>
            <li style="float:left;" onmouseover="setTab(0,8)"><a href="#"><span>CSDN控制台</span></a></li>
        </ul>
    </div>
    </td>
    </tr>
    <tr>
    <td bgcolor="#f4f4ef">
    <div id="main0">
        <!-- 这个ul给上面"menu0"的ul作定位用 -->
        <ul>        
    </ul>
        <ul>
            <li class="MainMenuFloatLeft"><a href='http://community.csdn.net/' target='_blank'>社区首页</a> | </li> 
            <li class="MainMenuFloatLeft"><a href='http://community.csdn.net/Expert/member/MyForum.asp?typenum=1' target='_blank'>我的问题</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://community.csdn.net/Expert/member/MyForum.asp?typenum=3' target='_blank'>我的得分问题</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://community.csdn.net/Expert/member/MyForum.asp?typenum=2' target='_blank'>我参与的问题</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://message.csdn.net/ListMessage.aspx' target='_blank'>我的短消息</a></li>
    </ul>
        <ul style="display: none;">
            <li class="MainMenuFloatLeft"><a href='http://blog.csdn.net/' target='_blank'>博客首页</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://blog.csdn.net/LatestEntry.aspx' target='_blank'>最新文章</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://writeblog.csdn.net/PostEdit.aspx' target='_blank'>发表新文章</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://writeblog.csdn.net/PostList.aspx' target='_blank'>管理我的文章</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://writeblog.csdn.net/Feedback.aspx' target='_blank'>我的评论</a></li>
        </ul>
        <ul style="display: none;">
            <li class="MainMenuFloatLeft"><a href='http://book.csdn.net/' target='_blank'>图书首页</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://www.dearbook.com.cn/' target='_blank'>我要买书</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://club.book.csdn.net/people/myclub.aspx' target='_blank'>我的书友会</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://bank.csdn.net/' target='_blank'>我的社区银行</a></li>
        </ul>
        <ul style="display: none;">
            <li class="MainMenuFloatLeft"><a href='http://download.csdn.net/' target='_blank'>资源首页</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://download.csdn.net/sort/new/all' target='_blank'>最新资源</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://download.csdn.net/sort/hot/all' target='_blank'>热门资源</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://download.csdn.net/upfile/' target='_blank'>发布新资源</a></li>
        </ul>
        <ul style="display: none;">
            <li class="MainMenuFloatLeft"><a href='http://group.csdn.net/All' target='_blank'>群组首页</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://groups.csdn.net/MyGroups' target='_blank'>我的群组</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://groups.csdn.net/IJoined' target='_blank'>我参与的群组</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://groups.csdn.net/ExGroups' target='_blank'>推荐群组</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://groups.csdn.net/create' target='_blank'>创建新群组</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://groups.csdn.net/Group/SubscribeServices.aspx' target='_blank'>订阅群组</a></li>
        </ul>
        <ul style="display: none;">
            <li class="MainMenuFloatLeft"><a href='http://job.csdn.net/' target='_blank'>人才首页</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://job.csdn.net/Con002_UserInfo/Portal/Login_User.aspx' target='_blank'>我的简历</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://job.csdn.net/Con002_UserInfo/Portal/Login_Ent.aspx' target='_blank'>我要招聘人才</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://job.csdn.net/emag/default.aspx' target='_blank'>订阅人才周刊</a></li>
        </ul>
        <ul style="display: none;">
            <li class="MainMenuFloatLeft"><a href='http://prj.csdn.net/' target='_blank'>外包首页</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://prj.csdn.net/developer/default.aspx' target='_blank'>我的外包中心</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://prj.csdn.net/developer/projectlist.aspx' target='_blank'>我申请的项目</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://prj.csdn.net/developer/itemlist.aspx' target='_blank'>我的案例</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://prj.csdn.net/developer/myadditem.aspx' target='_blank'>添加新案例</a></li>
        </ul>
        <ul style="display: none;">
            <li class="MainMenuFloatLeft"><a href='http://passport.csdn.net/NewPassword.aspx' target='_blank'>新设密码</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://passport.csdn.net/ModifyQA.aspx' target='_blank'>修改问题答案</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://passport.csdn.net/ModifyEmail.aspx' target='_blank'>修改Email</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://passport.csdn.net/Protocol.aspx' target='_blank'>注册条款</a></li> 
        </ul>
    <!-- 这个ul给上面"main0"的ul作定位用 -->
    <ul></ul>
    </div>
    </td>
    </tr>
    </table> </BODY>
    </HTML>
      

  3.   

    楼上的是用到了CSS的浮动（Float）原理与标记<ul><li>来做的功能。把标记<li>的每个元素都浮动到左边形成一行来实现CSS Float是网页设计最强大的灵活性功能之一。
    任何元素 element 都可以被浮动。段落、div、list、tables,以及图像都可以被浮动，事实上即使是像 span 和 strong 这样的行内置元素也可以很好地进行浮动。
    任何申明为 float 的元素自动被设置为一个"块级元素", 这表示它可以具有申明的"width"和"height"属性。事实上，floats当前被要求具有一个申明的宽度，但这不是现代浏览器制造者的思路，W3C以及开始同意这样的作法。现在大多数人的意见是没有指定宽度的float应当伸缩包装到浮动内容的宽度。因此，内部带有图片的一个float将和图片一样宽，带有文本的一个浮动将与该浮动内的最长文本行一样宽。
    浮动"从流程中被移除出来", 但是与绝对位置的元素（层次）不同，浮动是在他们前面的最后一个块元素之后直接被显示出来（就像块盒一样）。如果该浮动是在一个“行块”中，该浮动的上边界被放置在行块顶部的水平上。当除此以外，浮动与绝对元素相似，原先的块盒会完全忽略浮动和AP元素。那些静态的块盒知识保持一个接一个地”跟随“，就好像没有浮动不在那里一样。
      

  4.   

    一个好看一点的：<HTML>
     <HEAD>
      <TITLE> 横向菜单 </TITLE> 
      <style>
      .MainMenuFloatLeft{float:left;height:30;margin-top:10px}
      .mainStyle{BACKGROUND-COLOR: #efefd0;}
      </style>
     </HEAD> <BODY>
      <script type="text/javascript">
    function setTab(m,n){
    var tli=document.getElementById("menu"+m).getElementsByTagName("li");
    var mli=document.getElementById("main"+m).getElementsByTagName("ul");
    for(i=0;i<tli.length;i++){
    tli[i].className=i==n?"mainStyle":"";
    mli[i].style.display=i==n?"block":"none";
    }
    }
    </script>
    <table cellPadding="0" align="center" border="0" cellSpacing="0">
    <tr>
    <td bgcolor="#f4f4ef">
    <div>
        <ul id="menu0">
            <!-- 这里的样式一定要用"style"格式，不能用"class="格式。不然移动Mouse时不能定住浮动成一行的样式 -->
            <li style="float:left;WIDTH: 80px;TEXT-ALIGN: center"><a href="#"><span><font color="black">我要</font></span></a></li>
            <li style="float:left;WIDTH: 80px;TEXT-ALIGN: center" onmouseover="setTab(0,1)"><a href="#"><span><font color="black">去社区</font></span></a></li>
            <li style="float:left;WIDTH: 80px;TEXT-ALIGN: center" onmouseover="setTab(0,2)"><a href="#"><span><font color="black">写博客</font></span></a></li>
            <li style="float:left;WIDTH: 80px;TEXT-ALIGN: center" onmouseover="setTab(0,3)"><a href="#"><span><font color="black">看图书</font></span></a></li>
            <li style="float:left;WIDTH: 80px;TEXT-ALIGN: center" onmouseover="setTab(0,4)"><a href="#"><span><font color="black">下资源</font></span></a></li>
            <li style="float:left;WIDTH: 80px;TEXT-ALIGN: center" onmouseover="setTab(0,5)"><a href="#"><span><font color="black">去群组</font></span></a></li>
            <li style="float:left;WIDTH: 80px;TEXT-ALIGN: center" onmouseover="setTab(0,6)"><a href="#"><span><font color="black">找工作</font></span></a></li>
            <li style="float:left;WIDTH: 80px;TEXT-ALIGN: center" onmouseover="setTab(0,7)"><a href="#"><span><font color="black">接项目</font></span></a></li>
            <li style="float:left;WIDTH: 80px;TEXT-ALIGN: center" onmouseover="setTab(0,8)"><a href="#"><span><font color="black">CSDN控制台</font></span></a></li>
        </ul>
    </div>
    </td>
    </tr>
    <tr>
    <td bgcolor="#efefd0" style="VERTICAL-ALIGN: middle;">
    <div id="main0">
        <!-- 这个ul给上面"menu0"的ul作定位用 -->
        <ul>        
    </ul>
        <ul>
            <li class="MainMenuFloatLeft"><a href='http://community.csdn.net/' target='_blank'>社区首页</a> | </li> 
            <li class="MainMenuFloatLeft"><a href='http://community.csdn.net/Expert/member/MyForum.asp?typenum=1' target='_blank'>我的问题</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://community.csdn.net/Expert/member/MyForum.asp?typenum=3' target='_blank'>我的得分问题</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://community.csdn.net/Expert/member/MyForum.asp?typenum=2' target='_blank'>我参与的问题</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://message.csdn.net/ListMessage.aspx' target='_blank'>我的短消息</a></li>
    </ul>
        <ul style="display: none;">
            <li class="MainMenuFloatLeft"><a href='http://blog.csdn.net/' target='_blank'>博客首页</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://blog.csdn.net/LatestEntry.aspx' target='_blank'>最新文章</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://writeblog.csdn.net/PostEdit.aspx' target='_blank'>发表新文章</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://writeblog.csdn.net/PostList.aspx' target='_blank'>管理我的文章</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://writeblog.csdn.net/Feedback.aspx' target='_blank'>我的评论</a></li>
        </ul>
        <ul style="display: none;">
            <li class="MainMenuFloatLeft"><a href='http://book.csdn.net/' target='_blank'>图书首页</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://www.dearbook.com.cn/' target='_blank'>我要买书</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://club.book.csdn.net/people/myclub.aspx' target='_blank'>我的书友会</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://bank.csdn.net/' target='_blank'>我的社区银行</a></li>
        </ul>
        <ul style="display: none;">
            <li class="MainMenuFloatLeft"><a href='http://download.csdn.net/' target='_blank'>资源首页</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://download.csdn.net/sort/new/all' target='_blank'>最新资源</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://download.csdn.net/sort/hot/all' target='_blank'>热门资源</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://download.csdn.net/upfile/' target='_blank'>发布新资源</a></li>
        </ul>
        <ul style="display: none;">
            <li class="MainMenuFloatLeft"><a href='http://group.csdn.net/All' target='_blank'>群组首页</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://groups.csdn.net/MyGroups' target='_blank'>我的群组</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://groups.csdn.net/IJoined' target='_blank'>我参与的群组</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://groups.csdn.net/ExGroups' target='_blank'>推荐群组</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://groups.csdn.net/create' target='_blank'>创建新群组</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://groups.csdn.net/Group/SubscribeServices.aspx' target='_blank'>订阅群组</a></li>
        </ul>
        <ul style="display: none;">
            <li class="MainMenuFloatLeft"><a href='http://job.csdn.net/' target='_blank'>人才首页</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://job.csdn.net/Con002_UserInfo/Portal/Login_User.aspx' target='_blank'>我的简历</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://job.csdn.net/Con002_UserInfo/Portal/Login_Ent.aspx' target='_blank'>我要招聘人才</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://job.csdn.net/emag/default.aspx' target='_blank'>订阅人才周刊</a></li>
        </ul>
        <ul style="display: none;">
            <li class="MainMenuFloatLeft"><a href='http://prj.csdn.net/' target='_blank'>外包首页</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://prj.csdn.net/developer/default.aspx' target='_blank'>我的外包中心</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://prj.csdn.net/developer/projectlist.aspx' target='_blank'>我申请的项目</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://prj.csdn.net/developer/itemlist.aspx' target='_blank'>我的案例</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://prj.csdn.net/developer/myadditem.aspx' target='_blank'>添加新案例</a></li>
        </ul>
        <ul style="display: none;">
            <li class="MainMenuFloatLeft"><a href='http://passport.csdn.net/NewPassword.aspx' target='_blank'>新设密码</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://passport.csdn.net/ModifyQA.aspx' target='_blank'>修改问题答案</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://passport.csdn.net/ModifyEmail.aspx' target='_blank'>修改Email</a> | </li>
            <li class="MainMenuFloatLeft"><a href='http://passport.csdn.net/Protocol.aspx' target='_blank'>注册条款</a></li> 
        </ul>
    <!-- 这个ul给上面"main0"的ul作定位用 -->
    <ul></ul>
    </div>
    </td>
    </tr>
    </table> </BODY>
    </HTML>