谁能给我个div+css实现的dropdownlist下拉树形菜单代码阿

是这样的，做一个中医站内搜索，大家都知道中医有很多类别，比如什么五脏，六腑这些的五脏下面又有很多，总之很多很多。。，查找的时候要选择一个类别，但是这个类别太长了，有3000多行，如果全部绑在dropdownlist里面会很长，所以想找一断代码，能实现dropdownlist下拉树形菜单（能伸缩的）请问有同志做过么？

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

补充下：我做了一个dropdownlist下拉菜单的树形结构，但是只是好看，不能伸缩，所以依然很长。。要个可以根节点能够伸缩的。。
CSS文件和javascript
------
<style type="text/css">#cssdropdown, #cssdropdown ul {
padding: 0;
margin: 0;
list-style: none;
}#cssdropdown li {
float: left;
position: relative;
}.mainitems{
border: 1px solid black;
background-color: #FFEEC6;
}.mainitems a{
margin-left: 6px;
margin-right: 8px;
text-decoration: none;
}.subuls{
display: none;
width: 10em;
position: absolute;
top: 1.2em;
left: 0;
background-color: lightyellow;
border: 1px solid black;
}.subuls li{
width: 100%;
}.subuls li a{
text-decoration: underline;
}#cssdropdown li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
}#cssdropdown li:hover ul, li.over ul { /* lists nested under hovered list items */
display: block;
}#restofcontent { /*wrap rest of content of the page inside this div*/
clear: left;
}</style><script type="text/javascript"><![CDATA[//><!]]></script>HTML代码-----------------------<ul id="cssdropdown"><li class="mainitems">
<a href="http://www.cssdrive.com">CSS Gallery</a>
<ul class="subuls">
<li><a href="">Gordon Mac</a></li>
<li><a href="">Juiced Thoughts</a></li>
<li><a href="">The Daily Flight</a></li>
<li><a href="">GrapeFruit</a></li>
</ul>
</li><li class="mainitems">
<a href="http://www.cssdrive.com/index.php/examples/">CSS Examples</a>
<ul class="subuls" style="width: 15em">
<li><a href="">CSS2 Generated Content</a></li>
<li><a href="">Custom scrollbar colors</a></li>
<li><a href="">Markerless and "no indent" Lists</a></li>
</ul>
</li></ul><div id="restofcontent">
<br />
"
</div>
不要用dropdownlist，使用autocomplete吧。
这个直接保存到一个html文件，样式你稍微调整一下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mb5u.com</title>
<style type="text/css">
.menu {
font-family: verdana, sans-serif;
width:750px;
position:relative;
font-size:0.85em;
padding-bottom:250px;
}
.menu ul {
padding:0;
margin:0;
list-style-type: none;
}
.menu ul li {
float:left;
position:relative;
}
.menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
color:#000;
width:139px;
height:3em;
color:#000;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#dfc184;
padding-left:10px;
line-height:3em;
}
* html .menu ul li a, .menu ul li a:visited {
width:149px;
w\idth:139px;
}
.menu ul li ul {
display: none;
}
table {
margin:-1px;
border-collapse:collapse;
font-size:1em;
}
/* specific to non IE browsers */
.menu ul li:hover a {
color:#fff;
background:#bd8d5e;
}
.menu ul li:hover ul {
display:block;
position:absolute;
top:3em;
margin-top:1px;
left:0;
width:150px;
}
.menu ul li:hover ul li ul {
display: none;
}
.menu ul li:hover ul li a {
display:block;
background:#faeec7;
color:#000;
height:auto;
line-height:1.2em;
padding:5px 10px;
width:129px
}
.menu ul li:hover ul li a.drop {
background:#c9c9a7;
}
.menu ul li:hover ul li a:hover {
background:#c9c9a7;
color:#000;
}
.menu ul li:hover ul li:hover ul {
display:block;
position:absolute;
left:150px;
top:0;
width:150px;
}
.menu ul li:hover ul li:hover ul.left {
left:-150px;
}
</style>

</head>
<body>
<div class="menu">
<ul>
<li><a class="drop" href="http://www.google.com/">DEMOS

</a>

<table><tr><td>
<ul>
<li><a href="http://www.google.com/" title="The zero dollar ads page">zero dollars advertising page</a></li>
<li><a href="http://www.google.com/" title="Wrapping text around images">wrapping text around images</a></li>
<li><a href="http://www.google.com/" title="Styling forms">styled form</a></li>
<li><a href="http://www.google.com/" title="Removing active/focus borders">active focus</a></li>
<li><a class="drop" href="http://www.google.com/" title="Hover/click with no active/focus borders">hover/click with no borders

</a>

<table><tr><td>
<ul>
</body></html>
参考  数据库
id      parid      tile
1            0            a
2            1            b
3            1              c
4            2              d
5            2              e
6            3              f
.            .              .
.            .              .
.            .              .
我想出现这样的结果
1.................
   2..............
         4...........
         5...........
   3..............
         6...........
结果是出现在dropdownlist下拉菜单中，请问怎样实现呢
---------------------------------------------------------------

private  void  Page_Load(object  sender,  System.EventArgs  e)
{
           DataTable  dt  =  GetData();
           GetString(dt,0);
}

private  void  GetString(DataTable  dt,int  id)
{
           DataView  dv  =  new  DataView(dt);
           dv.RowFilter  =  "parentid  =  "  +  id.ToString();
           int  m=0;
           foreach(DataRowView  drv  in  dv)
           {
                       m++;
                       string  blank="";
                       if(id!=0)
                       {
                                   for(int  i=0;i<m;i++)
                                   {
                                               blank+="空格";
                                   }
                       }
                       ListItem  li=new  ListItem();
                       li.Text=blank+drv["id"].ToString()+drv["name"].ToString();
                       li.Value=drv["id"].ToString();
                       this.Dropdownlist3.Items.Add(li);
                       GetString(dt,Convert.ToInt32(drv["id"]));
           }
}
private  DataTable  GetData()
{
           DataTable  dt;
           dt  =  new  DataTable();

           dt.Columns.Add("id");
           dt.Columns.Add("parentid");
           dt.Columns.Add("name");

           DataRow  dr;
           dr  =  dt.NewRow();
           dr["id"]  =  "1";
           dr["parentid"]  =  "0";
           dr["name"]  =  "a";
           dt.Rows.Add(dr);

           dr  =  dt.NewRow();
           dr["id"]  =  "2";
           dr["parentid"]  =  "1";
           dr["name"]  =  "b";
           dt.Rows.Add(dr);

           dr  =  dt.NewRow();
           dr["id"]  =  "3";
           dr["parentid"]  =  "1";
           dr["name"]  =  "c";
           dt.Rows.Add(dr);

           dr  =  dt.NewRow();
           dr["id"]  =  "4";
           dr["parentid"]  =  "2";
           dr["name"]  =  "d";
           dt.Rows.Add(dr);

           dr  =  dt.NewRow();
           dr["id"]  =  "5"
;;
           dr["parentid"]  =  "2";
           dr["name"]  =  "e";
           dt.Rows.Add(dr);

           dr  =  dt.NewRow();
           dr["id"]  =  "6";
           dr["parentid"]  =  "3";
           dr["name"]  =  "f";
           dt.Rows.Add(dr);
           return  dt;

}
看这个jQuery EasyUI：Tree
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">
function show1(){
    for (i=1;i<4;i++)
{
    eval("div"+i).style.display="none"
}
}
function show(n){
    var obj = document.getElementById("div"+n)
if (obj.style.display=="none")
{
    show1();
        obj.style.display="inline";
}
else
{
    obj.style.display="none"
}
}
</script>
</head><body>
<table border="1">
  <tr>
    <td><a href="#" onclick="show(1)">我的好友</a><br /><div id="div1" style="display:none">碧云蓝天<br />碧云小刀<br />碧云晴天</div></td>
  </tr>
  <tr>
    <td><a href="#" onclick="show(2)">陌生人</a><br /><div id="div2" style="display:none">轻狂`de人<br />轻狂`de神<br />轻狂`de圣</div></td>
  </tr>
  <tr>
    <td><a href="#" onclick="show(3)">黑名单</a><br /><div id="div3" style="display:none">狂妄-01<br />狂妄-02<br />狂妄-03</div></td>
  </tr>
</table>
</body>
</html>
就用jquery里面的autocomplete吧  我就是使用的这种