Tip: you can modify some code before running
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test</title> <style type="text/css">. Box {display: inline; position: relative; width: auto; float: left; height: 20px; border: 1px solid # cccccccc; line-height: 22px; margin: 100px ;}. box ,. box a: visited ,. box a: active {width: 100%; height: auto; font-size: 12px; border-left: 1px solid # CCCCCC; border-right: 1px solid # CCCCCC; display: none; float: left; color: #000; margin-left:-1px; margin-right: 15px; height: 100%; cursor: default; text-indent: 3px; clear: Both; text-decoration: none ;}. box a: hover {background: # FCC; color: #000; cursor: default; text-decoration: none ;}# cur {display: inline ;}. box span {background: url (/attachment. php? Aid = 8800 & noupdate = yes) right 3px no-repeat; position: absolute; top: 0; right: 0; width: 15px; height: 100% ;}. hover {background: # FCC}</style><script type="text/javascript">Function $ (id) {return document. getElementById (id)} set_select = {show: function (obj) {// open the drop-down menu var n; var list = obj. getElementsByTagName ("a"); var L = list. length; for (I = 0; I<L;i++){if(list[i].id=="selected")n=i;list[i].id="";list[i].style.display="inline";list[i].onmouseout=function(){this.className=""}if(i==L-1)list[i].style.borderBottom="1px solid #CCCCCC";(function(m){list[m].onclick=function(){set_select.hidden(obj,m)}})(i)}if(n){list[n].className="hover";}},init:function(id){//页面加载初始化var list=$(id).getElementsByTagName("a");var L=list.length;selecthtml=$(id).innerHTML;for(i=0;i<L;i++){if(list[i].id=="selected"){$(id).innerHTML=list[i].outerHTML+selecthtml;}}list[0].id="cur";list[0].className="";},hidden:function(obj,m){//点击选项后隐藏var list=obj.getElementsByTagName("a");var L=list.length;obj.innerHTML=list[m].outerHTML+selecthtmlfor(i=0;i<L;i++){list[i].id="";list[i].className="";}list[m].className="hover";},selecthtml:""//定义初始列表HTML}</script></head> <body><input name="this" value="" type="text" /><div class="box" id="box" onclick="set_select.show(this)">What do you mean? Here is option 1. Here is option 2. Here is option 3. Here is option 4.</div><script type="text/javascript">Set_select.init ("box ")</script><input name="this" value="" type="text" /><div class="box" id="str" onclick="set_select.show(this)">What are you talking about? 222 here is option 1. 22 here is option 2. 22 here is option 3. 22 here is option 4. 22</div><script type="text/javascript">Set_select.init ("str ")</script></body> </html>
Tip: you can modify some code before running
