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

chen_xin_ 2009-11-12 02:16:42
怎样在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 !
...全文
334 12 打赏 收藏 转发到动态 举报
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
makeppy 2009-11-12
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 wo554006164 的回复:]
图不明确,看不出什么效果
[/Quote]图不明确,看不出什么效果
chen_xin_ 2009-11-12
  • 打赏
  • 举报
 回复
我要的效果是这样子的
donet_expert 2009-11-12
  • 打赏
  • 举报
 回复
也可以看看这个，全部用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 & 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>
dean8828 2009-11-12
  • 打赏
  • 举报
 回复 
<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>


试下是不是要这种效果
xiaofan_sap 2009-11-12
  • 打赏
  • 举报
 回复
lz 冒昧的说一句 这个用表格或者div就可以实现了 何必用你说的那个呢 ，自己没做过 期待高手
chen_xin_ 2009-11-12
  • 打赏
  • 举报
 回复
不管用什么技术关键是怎么实现我要的效果
benewu 2009-11-12
  • 打赏
  • 举报
 回复
这不是表格吗
wo554006164 2009-11-12
  • 打赏
  • 举报
 回复
用DIV代替了
wwwarewow 2009-11-12
  • 打赏
  • 举报
 回复
最好不用下拉框,应该做不出那种效果.
用js代码仿的下了列表.
wo554006164 2009-11-12
  • 打赏
  • 举报
 回复
图不明确,看不出什么效果
chen_xin_ 2009-11-12
  • 打赏
  • 举报
 回复

误会我的意思了，我要的是这样的效果
http://p.blog.csdn.net/images/p_blog_csdn_net/zhaojiangang/EntryImages/20090610/1.JPG
wwwarewow 2009-11-12
  • 打赏
  • 举报
 回复
<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>
【C#】完美实现ComBox多列下拉框+自动完成+DataGridView自定义列
灵活：数据源、下拉框内显示的列、列名、可搜索关键字等可自由定义 方便：可输可选/支持键盘操作/模糊过滤/自动完成匹配 标准：通过继承combobox实现，可单独使用，也可嵌入datagridview使用 水平有限，欢迎大家多提宝贵意见，共同学习 QQ：41357935 本控件以“随风飘散”在 http://www.cnblogs.com/CodeAnyWhere/archive/2007/09/03/880780.html中的示例代码为基础改进而来，在此感谢！.
java+js实现下拉框提示搜索功能
在输入框中输入信息，会出现下拉框列出符合条件的数据，实现动态的查找功能
vue 实现表单下拉框 --- 并且获取其中的值
说明 使用到了 v-model 指令 开始使用 获取下拉表单中的值 原理就是直接绑定 type 里面的值利用双向绑定的原理实现 <div id="app"> <select v-model="type"> //框里面的值会随着 type 值的变化而变化（关键） <option value="1">一---1</option> <option value.
若依--下拉框--修改
实现效果 <if test="cid != null and cid != ''">cid = #{cid} </if> mmap.put("classes", classesService.selectClassesAll()); <!-- 下拉框修改--> <div class="row"> <label class="col-xs-2 cont
html-表单-两种下拉框
html的两种下拉框 <!-- 两种下拉框 --> <select name="cars"><!-- 下拉框 --> <option value ="volvo">124</option><!-- 下拉框选项 --> <option value="saad">saad</option> <option value="fiat">fiat</option> <
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章