下拉选框

body

<div id="box" >
            <div id="title">请选择游戏名称</div>
            <ul id='list' style="list-style: none;border-top: none;">
                <li>王者荣耀</li>
                <li>英雄联盟</li>
                <li>天涯明月刀</li>
                <li>梦幻西游</li>
                <li>刺激战场</li>
                <li>DNF</li>
            </ul>
        </div>

样式

<style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            body{
                background: gray;
            }
            #box{
                width: 150px;
                margin: 0 auto;
                text-align: center;
                /*border: 1px solid black;*/            
            }
            #title{
                height: 50px;
                line-height: 50px;
                border: 1px solid black;            
                
            }
            #list{
                background-color: black;
                color: white;
                border: 1px solid black;
                display: none;
            }
            #box ul li{
                height: 50px;
                line-height: 50px;
                border-bottom: 1px dashed white;
            }
        </style>

JS写法

<script type="text/javascript">
            onload = function(){
                title.onmouseenter = list.onmouseenter = function(){
                    list.style.display = 'block'
                }
                
                title.onmouseleave = list.onmouseleave = function(){
                    list.style.display = 'none'
                }
                
                
                var olist = document.getElementsByTagName('li')
                for(var i=0;i<olist.length;i++){
                    olist[i].onmouseenter = function(){
                        this.style.backgroundColor = 'gray'
                    }
                    
                    olist[i].onmouseleave = function(){
                        this.style.backgroundColor = 'black'
                    }
                    
                    olist[i].onclick = function(){
                        title.innerHTML = this.innerHTML
                        list.style.display = 'none'
                    }
                }
                
                
            }
        </script>