css配合js模拟的select下拉框

css配合js模拟的select下拉框

 <!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>无标题文档</title>
 <style>
 *{margin:0; padding:0;}
 a{text-decoration:none;}
 .selectBox{width:300px; height:30px; position:relative; border:#09F solid 1px; margin:100px auto;}
 .select_txt{width:100%; height:30px; font:14px/30px "Microsoft YaHei"; position:relative;}
 .txt{padding:0 10px; font-size:14px; font-weight:normal;}
 .sj{border-width:6px; border-color:#09F #FFFFFF #FFFFFF #FFFFFF; border-style:solid dashed dashed dashed; position:absolute; right:10px; top:12px; cursor:pointer;}
 .select{border:#09F solid 1px; overflow:hidden; width:300px; position:absolute; left:-1px; top:30px; display:none;}
 .select a{display:block; padding:0 10px; font:14px/2 "Microsoft YaHei";}
 .select a:hover{background:#09F; color:#FFF;}
 </style>
 </head>

 <body>
 <div class="selectBox">
         <div class="select_txt">
             <h3 class="txt" id="txt">文字部分</h3>
         <span class="sj" id="sj"></span>
     </div>
     <div class="select" id="select">
             <a href="javascript:;">首页</a>
             <a href="javascript:;">关于我们</a>
             <a href="javascript:;">联系我们</a>
             <a href="javascript:;">关于我们</a>
             <a href="javascript:;">联系我们</a>
             <a href="javascript:;">联系我们</a>
             <a href="javascript:;">联系我们</a>
             <a href="javascript:;">联系我们</a>
     </div>
 </div>
 <script>
 (function(){
         var oTxt = document.getElementById('txt');
         var oSj = document.getElementById('sj');
         var oSelect = document.getElementById('select');
         var aA = oSelect.getElementsByTagName('a');

         oSj.onclick = function(ev)
         {
                 var oEvent = ev || event;
                 oSelect.style.display = 'block';

                 for(var i=0;i<aA.length;i++)
                 {
                         aA[i].onclick = function(ev)
                         {
                                 var oEvent = ev || event;
                                 oTxt.innerHTML = this.innerHTML;
                         }

                 }

                 oEvent.cancelBubble = true;
         }
         document.onclick = function(){oSelect.style.display = 'none';}

 })()
 </script>
 </body>
 </html>