css配合js模拟的select下拉框 | 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>