导航双重下拉列表 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin: 0px;
                padding: 0px;
                list-style: none;
            }
            ul li{
                float: left;
                margin-left: 3px;
                text-align: center;
                border: 1px solid transparent;
                    width: 90px;
            
            }
            ul li ul {
                display: none;
                
            /*  border: 1px solid red;*/
                width: 100px;
            }
            
        </style>
    </head>
    <body>
        <ul>
            <li onmousemove="ss(1)" onmouseout="h()" >
                <a href="http://www.baidu.com">首页|</a>
                <ul id="s1">
                <li><a href="#">公积金贷款</a></li>
                <li><a href="#">公积金咨询</a></li>
                <li><a href="#">公积金回答</a></li>
                <li><a href="#">表格下载</a></li>
                <li><a href="#">贷款计算器</a></li>
                </ul>
            </li>
            <li onmousemove="ss(2)" onmouseout="h(2)">
                
                <a href="#">公积金查询</a>
                <ul id="s2">
                <li><a href="#">公积金贷款</a></li>
                <li><a href="#">公积金咨询</a></li>
                <li><a href="#">公积金回答</a></li>
                <li><a href="#">表格下载</a></li>
                <li><a href="#">贷款计算器</a></li>
                </ul>
            </li>
            <li onmousemove="ss(3)" onmouseout="h(3)">
                
                <a href="#">政府法规</a>
                <ul id="s3">
                <li><a href="#">公积金贷款</a></li>
                <li><a href="#">公积金咨询</a></li>
                <li><a href="#">公积金回答</a></li>
                <li><a href="#">表格下载</a></li>
                <li><a href="#">贷款计算器</a></li>
                </ul>
            </li>
            <li onmousemove="ss(4)" onmouseout="h(4)">
                
                <a href="#">公积金提取</a>
                <ul id="s4">
                <li><a href="#">公积金贷款</a></li>
                <li><a href="#">公积金咨询</a></li>
                <li><a href="#">公积金回答</a></li>
                <li><a href="#">表格下载</a></li>
                <li><a href="#">贷款计算器</a></li>
                </ul>
            </li>
            
            
        
        </ul>
    </body>
    <script>
        
            function ss(num){
                if(num==1){
                    document.getElementById("s1").style.display="block";
                }else if(num==2){
                    document.getElementById("s2").style.display="block";
                }else if(num==3){
                    document.getElementById("s3").style.display="block";
                }else{
                    document.getElementById("s4").style.display="block";
                }
            }
            function h(){
                    document.getElementById("s1").style.display="none";
                    document.getElementById("s2").style.display="none";
                    document.getElementById("s3").style.display="none";
                    document.getElementById("s4").style.display="none";
            }
        
    </script>
</html>

 

posted @ 2019-03-07 20:52  芯-觞  阅读(336)  评论(0)    收藏  举报