<style>
ul{
    padding: 0;margin:0;list-style: none;
}
.item{
         border:1px solid #ccc;
         width:100px;
        height: 30px;
}
.item span{
                float:left;
                width:80px;
                height: 30px;
                line-height: 30px;
                text-align: center;
}
.item span:nth-child(2){
                                  width:0;
                                  height:0;
                                  border:5px solid transparent;
                                  border-top-color:#000;
                                  margin-top: 10px;
                                  margin-left:5px;
}
.list{
       clear:both;
       display: none;
       border:1px solid #ccc;
       width: 100px;
}
.list li:hover{
                  background: #ccc;
}

</style>

<div id="item" class="item"><span class="content">北京</span><span></span></div>
<ul id="list" class="list">
    <li>北京</li>
    <li>上海</li>
    <li>武汉</li>
    <li>长沙</li>
    <li>深圳</li>
</ul>

<script>
function $(id){
    return document.getElementById(id);
}

function preventBubble(ev){ //阻止冒泡
    var e=event||ev;
    if(e.stopPropagation){
        e.stopPropagation();
    }
    else{
        window.event.cancelBubble=true;
    }
}
var item = $("item");
var list = $(‘list‘);
var lis = list.getElementsByTagName("li");
var spans= item.getElementsByTagName("span");

spans[1].onclick=function(ev){//点击三角形显示所有目标项
    list.style.display="block";
    preventBubble(ev); //调用阻止冒泡
}
for(var i=0;i<lis.length;i++){ //点击目标被选中状态，
    lis[i].onclick=function(){
        spans[0].innerHTML=this.innerHTML;
        list.style.display="none";//其他的项隐藏
    }
}
document.onclick=function(){ //点击空白地方目标项隐藏
    list.style.display="none";
}
</script>

下拉列表（练习）