有些时候select下拉菜单直接用css调整样式，可能会有兼容性的问题，尤其是右侧的下拉三角，很难用css控制，那怎么办呢？可以采用div模拟select下拉菜单的效果。先直接上代码了：
HTML的结构如下：
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>div模拟下拉菜单特效</title> <style type="text/css"> body,ul,li{ margin:0; padding:0; font-size:13px;} ul,li{list-style:none;} #divselect{width:186px; margin:80px auto; position:relative; z-index:10000;} #divselect cite{width:150px; height:24px;line-height:24px; display:block; color:#807a62; cursor:pointer;font-style:normal; padding-left:4px; padding-right:30px; border:3px solid #333333; background:url(xjt.png) no-repeat right center;} #divselect ul{width:184px;border:1px solid #333333; background-color:#ffffff; position:absolute; z-index:20000; margin-top:-1px; display:none;} #divselect ul li{height:24px; line-height:24px;} #divselect ul li a{display:block; height:24px; color:#333333; text-decoration:none; padding-left:10px; padding-right:10px;} #divselect ul li a:hover{background-color:#CCC;} p{margin:10px auto; width:920px;} #n{margin:10px auto; width:920px; border:1px solid #CCC;font-size:12px; line-height:30px;} #n a{ padding:0 4px; color:#333} </style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="divselect.js"></script> <script type="text/javascript"> $(function(){ divselect("#divselect","#inputselect"); }); </script> </head> <body> <form action="" method="post"> <div id="divselect"> <cite>请选择特效分类</cite> <ul> <li><a href="javascript:;" selectid="1">发现</a></li> <li><a href="javascript:;" selectid="2">优惠</a></li> <li><a href="javascript:;" selectid="3">海淘</a></li> <li><a href="javascript:;" selectid="4">晒物</a></li> <li><a href="javascript:;" selectid="5">经验</a></li> </ul> </div> <input name="" type="hidden" value="" id="inputselect"/> </form> </body> </html>
divselect.js 如下：
divselect = function(divselectid,inputselectid) { var inputselect = $(inputselectid); $(divselectid+" cite").click(function(){ var ul = $(divselectid+" ul"); if(ul.css("display")=="none"){ ul.slideDown("fast"); }else{ ul.slideUp("fast"); } }); $(divselectid+" ul li a").click(function(){ var txt = $(this).text(); $(divselectid+" cite").html(txt); var value = $(this).attr("selectid"); inputselect.val(value); $(divselectid+" ul").hide(); }); $(document).click(function(){ $(divselectid+" ul").hide(); }); };