最简单的下拉菜单源码

来源:luqidong 发布时间:2014-01-04 17:56:10 点击数:
<style type="text/css">
#list li{float:left; width:40px; height:40px; background:#03F; color:#fff; font-size:14px; font-weight:bold; margin:10px;}
#list li img{float:left; width:40px; height:40px;}
#bigimg{ float:left; width:180px; height:180px;}
#content .br{background:red; border:2px solid #ff6600; margin:8px;}
#select{font-size:18px; font-weight:bold; background:#ddd; cursor:pointer;}
.tab,#baidu{display:block; overflow:hidden;}
#baidu li{list-style:none; cursor:pointer;}
#content .brr{background:red;}
</style>
 
<div id="content">
    <div id="baidu">
        <span id="state">输入法</span><span id="select" style="">v</span>
        <ul id="baiduInput" style="display:none;">
            <li>手写</li>
            <li>拼音</li>
            <li>关闭</li>
        </ul>
        <script type="text/javascript">
 
                document.getElementById("select").onclick = function(){
                    var bdI = document.getElementById("baiduInput");
                    if(bdI.style.display == "block" || bdI.style.display == ""){
                        document.getElementById("baiduInput").style.display = "none";
                        }
                        else{
                            document.getElementById("baiduInput").style.display = "block";
                            }
 
                }
        var bdli = document.getElementById("baiduInput").getElementsByTagName("li");
        for(var i = 0; i<bdli.length; i++){
            bdli[i].onclick = function(){
                if(this.innerHTML =="关闭"){
                    document.getElementById("state").innerHTML = "输入法";
                    }
                    else{
                        document.getElementById("state").innerHTML = this.innerHTML;
                        }
                document.getElementById("baiduInput").style.display = "none";
                }
            bdli[i].onmouseover = function(){
                for(i= 0; i<bdli.length; i++){
                    bdli[i].className = "";
                    }
                    this.className = "brr";
                }
            }
        </script>
    </div>
</div>