導航雙重下拉列表

時間  2020-06-20
標籤 導航 雙重 下拉 列表 简体版
原文   原文鏈接 
<!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>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程