CSS下拉菜单实现-优快云博客

本文链接：https://blog.youkuaiyun.com/yymonkeydo/article/details/78754183
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li{list-style: none;}
        body{color:#fff;font:16px/32px "微软雅黑";background: #333;}
        #box{width:500px;height:326px;color:#8d1;border:1px solid #000;background:#FFF;position:absolute;left:50%; top:50%;margin:-163px 0 0 -250px;}
        .province{width:320px;height:42px;background:#EEE;margin: 80px auto;position:relative;}
        .province strong{padding-left:15px;color:#2dc;width:64px;height: 42px;line-height:42px;display:block;float:left;}
        #selectProvince{width:200px;height:28px;display:block;float:left;margin-top: 4px;background: url(province_sprites.png) no-repeat 190px 1px;padding-left:8px;cursor:pointer;color:#CCC;}
        #allProvince{display:none;width:318px;height:auto;;line-height: 30px;padding-left: 0;clear:both;position: absolute;left:0;top:25px;border:1px solid #CCC;background-color: #FFF;border-top:none;z-index:101;}
        #allProvince li{height: 30px;border-bottom: 1px solid #ccc;}
        #allProvince li b{width:40px;text-align:center;display:inline-block;font-weight: bold;padding-left:10px;}
        #allProvince li span{padding-right:15px;cursor:pointer;}
        #allProvince li span:hover{color: #cc0000;}
        #layer{width:100%;height:100%;background:#333;position:absolute;top:0;left:0;z-index: 100;filter:alpha(opacity=50);opacity:0.5;display:none;}
    </style>
    <script>
        function addLoadEvent(func){
            var oldonload = window.onload;
            if(typeof window.onload != 'function'){
                window.onload = func;
            }else {
                window.onload = function () {
                    oldonload();//再次调用window.onload
                    func();//调用添加的初始化放
                }
            }
        }
        function getDom(id){
            return document.getElementById(id);
        }
        function showProvince(){
            getDom('selectProvince').onclick = showAllProvince;
        }
        function showAllProvince() {
            getDom('allProvince').style.display='block';
            getDom("layer").style.display='block';
            getDom("layer").onclick = function(){
                hideAllProvince();
            };
            getDom('selectProvince').style.backgroundPosition='190px -17px';
            getDom('selectProvince').style.color='#CCC';
            selectProvince();
        }
        function hideAllProvince() {
            getDom('allProvince').style.display='none';
            getDom("layer").style.display='none';
            getDom('selectProvince').style.backgroundPosition='190px -1px';
            getDom('selectProvince').style.color='#000';
        }
        function selectProvince(){
            var pro = getDom('allProvince').getElementsByTagName('li');
            var links;
            for(var i = 0; i < pro.length;i++){
                links = pro[i].getElementsByTagName('span');
                for(var j=0; j<links.length;j++){
                    links[j].οnclick=function(){
                        getDom('selectProvince').innerHTML = this.innerHTML;
                        hideAllProvince();
                    }
                }
            }
        }
        addLoadEvent(showProvince);
    </script>
</head>
<body>
    <div id="box">
        <div class="province">
            <strong>送货至：</strong>
            <span id="selectProvince">北京</span>
            <ul id="allProvince">
                <li><b>A</b><span>安徽</span></li>
                <li><b>B</b><span>北京</span></li>
                <li><b>C</b><span>重庆</span></li>
                <li><b>F</b><span>福建</span></li>
                <li><b>G</b><span>广东</span><span>广西</span></li>
                <li><b>H</b><span>河南</span><span>河北</span><span>黑龙江</span></li>
                <li><b>J</b><span>吉林</span></li>
            </ul>
        </div>
    </div>
    position:absolute;left:50%; top:50%;  box左上角在body中心点<br/>
    margin:-163px 0 0 -250px; 再偏移自身宽高一半，占据中心点<br/>
    clear:both; 清除浮动<br/>
    filter:alpha(opacity=0) 透明度  opacity:0.5; FF兼容<br/>
    点击列表之外的地方，收回列表。放一个全透明div，列表在div上面,点击透明的地方，回收列表<br/>
    z-index 值越大，越前面<br/><br/><br/>
    权重：<br/>
    行内样式：1000<br/>
    ID：100<br/>
    类：10<br/>
    标签：1<br/>
    <br/><br/><br/><br/><br/><br/>
<div id="layer"></div>
</body>
</html>
菜单优化
