怎样在网页中实现多列下拉框 ---急用急用！！！

怎样在web网页中，也就是在ie浏览器中实现多列下拉框，样式如下：! 列1　　列2　　列3　 列4　　列5 ! →这为下拉列表 
! 11 44 444 55 55 !
! 11 44 444 55 55 !
! 11 44 444 55 55 !
! 11 44 444 55 55 !
! 11 44 444 55 55 !

解决方案 »

  1.   

    <select>
    <option>11</option>
    <option>11</option>
    <option>11</option></select><select>
    <option>22</option>
    <option>22</option>
    <option>22</option></select><select>
    <option>33</option>
    <option>33</option>
    <option>33</option></select><select>
    <option>44</option>
    <option>44</option>
    <option>44</option></select>
      

  2.   


    误会我的意思了，我要的是这样的效果
    http://p.blog.csdn.net/images/p_blog_csdn_net/zhaojiangang/EntryImages/20090610/1.JPG
      

  3.   

    lz 冒昧的说一句 这个用表格或者div就可以实现了  何必用你说的那个呢 ，自己没做过  期待高手 
      

  4.   

    <style type="text/css">
    td {
    font-size: 12px;border-right: medium none; padding-right: 0px; border-top: medium none; padding-left: 0px; padding-bottom: 0px; margin: 0px; border-left: medium none; paddding-top: 0px; border-bottom: medium none
    }
    .NUM1 {color:#fff; width:80px; height:22px; cursor:pointer;}
    .NUM2 {color: #fff; width:80px; height:22px; cursor:pointer; background:url(/design/UploadFiles_design/200903/20090314092959117.gif) no-repeat; width:80px;}
    .num{text-align:center;background:url(/design/UploadFiles_design/200903/20090314093000680.jpg) no-repeat; margin-left:1px; font-weight:bold; font-family:SimHei; width:318px; height:22px; overflow:hidden;}
    .num{*position:relative; top:-1px;}
    #main a:link{color:#000; text-decoration:none;}
    #main a:visited{color:#000; text-decoration:none;}
    #main a:hover{color:#000; text-decoration:none;}
    #main {line-height:14px;}
    #main .title a:link{color:#f00; text-decoration:none;}
    #main .title a:visited{color:#f00; text-decoration:none;}
    #main .title a:hover{color:#f00; text-decoration:none;}
    </style>
    <div style="z-index: 10; height:22px; overflow:hidden;">
    <table cellspacing=0 cellpadding=0 width=22>
    <tbody>
    <tr>
    <td>
    <table cellspacing=0 class="num">
    <tbody>
    <tr>
    <td width=0 style="display:none;"><img id="upbtn" style="cursor: pointer"></td>
    </tr>
    <tr>
    <td id="led1" class="NUM2" onclick="javascript:slideTo(1);">1</td>
    <td id="led2" class="NUM1" onclick="javascript:slideTo(2);">2</td>
    <td id="led3" class="NUM1" onclick="javascript:slideTo(3);">3</td>
    <td id="led4" class="NUM1" onclick="javascript:slideTo(4);">4</td>
    </tr>
    </tbody>
    </table></td>
    </tr>
    </tbody>
    </table>
    </div>
    <div id="main" style="overflow:hidden; width:320px; position:relative; height: 85px;" >
    <div id="f1" style="z-index: 10; left: 0px; width: 320px; position: absolute; top: 0px; height: 85px;">
    <!-- 第1标签 开始 -->
    <div style="width:308px; padding:5px; height:75px; margin-left:1px; background:url(/design/UploadFiles_design/200903/20090314093000928.jpg) no-repeat;cursor:pointer;">
    <div style="float:left; width:195px; padding:3px 0 0 3px;">
    <div style="color:#f30; font-weight:bold; margin-bottom:8px;" class="title"><a href="http://www.webjx.com/" target="_blank">詹姆斯：全力以赴</a></div>
    <div><a href="http://www.webjx.com/" target="_blank">竞猜赛事结果，上传LBJ精彩动作，评论比赛表现，都有机会赢取LBJ运动装备大奖...</a></div>
    </div>
    </div>
    <!-- 第1标签 结束 -->
    </div>
    <div id="f2" style="z-index: 10; left: 0px; width: 320px; position: absolute; top: 85px; height: 85px">
    <!-- 第2标签 开始 -->
    <div style="width:308px; padding:5px; height:75px; margin-left:1px; background:url(/design/UploadFiles_design/200903/20090314093000928.jpg) no-repeat;cursor:pointer;">
    <div style="float:left; width:195px; padding:3px 0 0 3px;">
    <div style="color:#f30; font-weight:bold; margin-bottom:8px;" class="title"><a href="http://www.webjx.com/" target="_blank">LBJ6详尽测评</a></div>
    <div><a href="http://www.webjx.com/" target="_blank">在整个LBJ签名系列里,仅次于LBJ2的签名球鞋.他在舒适性上完全可以同LBJ2相媲美.比起2代,只有那么一点点的不足...</a></div>
    </div>
    </div>
    <!-- 第2标签 结束 -->
    </div>
    <div id="f3" style="z-index: 10; left: 0px; width: 320px; position: absolute; top: 170px; height: 85px">
    <!-- 第3标签 开始 -->
    <div style="width:308px; padding:5px; height:75px; margin-left:1px; background:url(/design/UploadFiles_design/200903/20090314093000928.jpg) no-repeat;cursor:pointer;">
    <div style="float:left; width:195px; padding:3px 0 0 3px;">
    <div style="color:#f30; font-weight:bold; margin-bottom:8px;" class="title"><a href="http://www.webjx.com" target="_blank">免费篮球馆</a></div>
    <div><a href="http://www.webjx.com" target="_blank">京城一流室内篮球馆免费开放，新浪篮球体验周火热启动...</a></div>
    </div>
    </div>
    <!-- 第3标签 结束 -->
    </div>
    <div id="f4" style="z-index: 10; left: 0px; width: 320px; position: absolute; top: 255px; height: 85px;">
    <!-- 第4标签 开始 -->
    <div style="width:308px; padding:5px; height:75px; margin-left:1px; background:url(/design/UploadFiles_design/200903/20090314093000928.jpg) no-repeat;cursor:pointer;">
    <div style="float:left; width:195px; padding:3px 0 0 3px;">
    <div style="color:#f30; font-weight:bold; margin-bottom:8px;" class="title"><a href="http://www.webjx.com" target="_blank">詹姆斯：有奖征文</a></div>
    <div><a href="http://www.webjx.com" target="_blank">NBA名人堂连续8周关注勒布朗詹姆斯跟踪骑士队比赛<a class="channel_keylink" href="http://www.htygp.com">，</a>竞猜评论赢取运动装备...</a></div>
    </div>
    </div>
    <!-- 第4标签 结束 -->
    </div>
    </div>
    </td>
    </tr>
    </tbody>
    </table>
    <script language="javascript" type="text/javascript">
    //<<a class="channel_keylink" href="http://www.htygp.com">!</a>[CDATA[
    var curFrame=1; //当前标签
    var frameheight = 85; //单层高度
    var speed = 5; //滚动速度
    var waitTime = 4000; //自动播放间隔时间
    var scrollItv;
    var autoItv;
    var maindiv = document.getElementById("main");
    autoItv = setInterval(autoSlide, waitTime);
    function slideTo(id){
    curFrame = id;
    var curTop = maindiv.scrollTop;
    var tarTop = frameheight*(id-1);
    var step = curTop>tarTop?-speed:speed;
    clearInterval(autoItv);
    clearInterval(scrollItv);
    scrollItv = setInterval(function(){
    maindiv.scrollTop += step;
    if(Math.abs(maindiv.scrollTop-tarTop)<speed){
    clearInterval(scrollItv);
    maindiv.scrollTop = tarTop;
    autoItv = setInterval(autoSlide, waitTime);
    }
    },20);
    for(i=1;i<=4;i++){
    document.getElementById('led'+i).className='NUM1';
    }
    document.getElementById('led'+curFrame).className='NUM2';
    }
    function autoSlide(){
    if(curFrame<4){curFrame++;}else{curFrame=1;}
    slideTo(curFrame);
    }
    //]]>
    </script>试下是不是要这种效果
      

  5.   

    也可以看看这个，全部用css实现的下拉菜单：
    #menu 
    {
      width: 100%;
      background: #eee;
      float: left;
    }
     
    #menu ul 
    {
      list-style: none;
      margin: 0;
      padding: 0;
      width: 12em;
      float: left;
    }
     
    #menu a, #menu h2 
    {
      font: bold 11px/16px arial, helvetica, sans-serif;
      display: block;
      border-width: 1px;
      border-style: solid;
      border-color: #ccc #888 #555 #bbb;
      margin: 0;
      padding: 2px 3px;
    }
     
    #menu h2 
    {
      color: #fff;
      background: #000;
      text-transform: uppercase;
    }
     
    #menu a 
    {
      color: #000;
      background: #efefef;
      text-decoration: none;
    }
     
    #menu a:hover 
    {
      color: #a00;
      background: #fff;
    }
     
    #menu li 
    {
      position: relative;
    }
     
    #menu ul ul 
    {
      position: absolute;
      z-index: 500;
    }
     
    #menu ul ul ul 
    {
      position: absolute;
      top: 0;
      left: 100%;
    }
     
    div#menu ul ul,
    div#menu ul li:hover ul ul,
    div#menu ul ul li:hover ul ul
    {
      display: none;
    }
     
    div#menu ul li:hover ul,
    div#menu ul ul li:hover ul,
    div#menu ul ul ul li:hover ul
    {
      display: block;
    }DropDownMenu.HTML file is:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html>
    <head>
    <LINK REL=StyleSheet HREF="DropDown.css" TYPE="text/css" MEDIA=screen>
    </head>
    <body>
    <div id="menu">
    <ul>
      <li><h2>CSS Drop Down Menus</h2>
        <ul>
          <li><a>Test</a>
          <li><a >CSS Hover Navigation</a>
            <ul>
              <li><a href="../css-dropdown-menus.html" title="tanfa Introduction">Intro for CSS Enthusiasts</a></li>
              <li><a href="index.html" title="Plain HTML Code">Demonstration HTML</a></li>
              <li><a href="http://www.xs4all.nl/~peterned/csshover.html" title="whatever:hover file">csshover.htc file</a></li>
            </ul>
          </li>
          <li><a>Test2</a>
        </ul>
      </li>
    </ul>
     
    <ul>
      <li><h2>Vertical CSS Pop-Out Menu</h2>
        <ul>
          <li><a href="http://www.seoconsultants.com/css/menus/vertical/" title="SEO Consultants Vertical Example">SEO Consultants Sample</a></li>
          <li><a href="vs7.html" title="Complete Example">tanfa Demo example</a>
            <ul>
              <li><a href="tutorial-v.html" title="Vertical Menu Tutorial">tanfa Tutorial</a> 
                <ul>
                  <li><a href="vs1.html" title="Vertical Menu - Page 1">Stage 1</a></li>
                  <li><a href="vs2.html" title="Vertical Menu - Page 2">Stage 2</a></li>  
                  <li><a href="vs3.html" title="Vertical Menu - Page 3">Stage 3</a></li>
                  <li><a href="vs4.html" title="Vertical Menu - Page 4">Stage 4</a></li>
                  <li><a href="vs5.html" title="Vertical Menu - Page 5">Stage 5</a></li>   
                  <li><a href="vs6.html" title="Vertical Menu - Page 6">Stage 6</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
     
    <ul>
      <li><h2>Horizontal Drop &amp; Pop Menu</h2>
        <ul>
          <li><a href="http://www.seoconsultants.com/css/menus/horizontal/" title="SEO Consultants Directory Example">SEO Consultants Sample</a></li>
          <li><a href="hs7.html">tanfa Demo example</a><!-- fully working sample -->
            <ul>
              <li><a href="tutorial-h.html" title="Horizontal Menu Tutorial">tanfa Tutorial</a>
                <ul>
                  <li><a href="hs1.html" title="Horizontal Menu - Page 1">Stage 1</a></li>
                  <li><a href="hs2.html" title="Horizontal Menu - Page 2">Stage 2</a></li>   
                  <li><a href="hs3.html" title="Horizontal Menu - Page 3">Stage 3</a></li>
                  <li><a href="hs4.html" title="Horizontal Menu - Page 4">Stage 4</a></li>
                  <li><a href="hs5.html" title="Horizontal Menu - Page 5">Stage 5</a></li>   
                  <li><a href="hs6.html" title="Horizontal Menu - Page 6">Stage 6</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>       
    </div>
    <div style="background:blue;">
    This is another div
    </div>
    </body>
    </html>