html下拉菜單的實現方式

時間 2019-12-06

原文原文鏈接

**css

方法一：純css實現下拉菜單

**html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        #nav{/*置父容器高度，寬度，背景顏色，容器水平居中*/
            background: #eee;
            width: 600px;
            height: 40px;
            margin: 0 auto;
        }
        #nav ul{/*去掉點點*/
            list-style: none;

        }
        #nav  ul li{/*每個li左浮動造成橫排，高度佔滿父容器造成文字垂直居中，文字水平居中*/
             float: left;
            line-height: 40px;
            text-align: center; 
            position: relative;/*給子ul定位用的*/
        }
        #nav  ul li a{/*去下下劃線,變成塊狀繼承父容器高度，左右撐開*/
            text-decoration: none;
            color:#000;
            padding:0 10px;
            display: block;
        }
        #nav  ul li a:hover{
            color: #fff;
            background-color: #666;
        }
        #nav  ul li ul {
            position: absolute;/*相對於父li的位置進行定位*/
            left: 0;
            top:40px;
            display: none;/*隱藏下拉菜單*/
        }
        #nav  ul li ul li{
            float: none;
            background-color:red;
        }
        #nav  ul li:hover ul{
            display: block;
        }
    </style>
</head>
<body>
    <div id="nav">
        <ul>
            <li><a href="#">首頁</a></li>
            <li><a href="#">課程大廳</a>
                <ul>
                    <li><a href="#">Javascript</a></li>
                    <li><a href="#">Jquery</a></li>
                </ul>
            </li>
            <li><a href="#">學習中心</a></li>
            <li><a href="#">經典案例</a></li>
            <li><a href="#">關於咱們</a></li>
        </ul>
    </div>
</body>
</html>

**ide

方法二：js實現下拉菜單

**學習

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        #nav{/*置父容器高度，寬度，背景顏色，容器水平居中*/
            background: #eee;
            width: 600px;
            height: 40px;
            margin: 0 auto;
        }
        #nav ul{/*去掉點點*/
            list-style: none;

        }
        #nav  ul li{/*每個li左浮動造成橫排，高度佔滿父容器造成文字垂直居中，文字水平居中*/
             float: left;
            line-height: 40px;
            text-align: center; 
            position: relative;/*給子ul定位用的*/
        }
        #nav  ul li a{/*去下下劃線,變成塊狀繼承父容器高度，左右撐開*/
            text-decoration: none;
            color:#000;
            padding:0 10px;
            display: block;
        }
        #nav  ul li a:hover{
            color: #fff;
            background-color: #666;
        }
        #nav  ul li ul {
            position: absolute;/*相對於父li的位置進行定位*/
            left: 0;
            top:40px;
            display: none;
        }
        #nav  ul li ul li{
            float: none;
            background-color:#eee;
        }
    </style>
    <!--js代碼-->
    <script>
    <!--顯示-->
    function show(li){
        var sub=li.getElementsByTagName("ul")[0];
        sub.style.display="block";
    }
    <!--隱藏-->
    function hide(li){
        var sub=li.getElementsByTagName("ul")[0];
        sub.style.display="none";
    }
    </script>
</head>
<body>
    <div id="nav">
        <ul>
            <li><a href="#">首頁</a></li>
            <!--onmouseover onmouseout-->
            <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">課程大廳</a>
                <ul>
                    <li><a href="#">Javascript</a></li>
                    <li><a href="#">Jquery</a></li>
                </ul>
            </li>
            <li><a href="#">學習中心</a></li>
            <li><a href="#">經典案例</a></li>
            <li onmouseover="show(this)" onmouseout=""><a href="#">關於咱們</a>
                <ul>
                    <li><a href="#">Javascript</a></li>
                    <li><a href="#">Jquery</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>