html+css實作二級導航欄效果，簡單易看懂噢！-有解無憂

這應該是這幾天以來看到的最簡單易懂的有二級選單欄的導航欄效果實作了

使用html+css實作，看了好幾天導航欄的實作方式，要么是太復雜的需要JS或者框架的，要么是太簡單僅僅使用div和超鏈接的，

再要么就是只有簡單的一級導航，沒有二級選單欄的，心情復雜

就想找一個有二級選單欄，使用html+css實作，使用無序串列ul+浮動實作的，今天總算是找到了，趕緊拿來練練手

代碼是很簡單，感覺可以當做模版來做，之后記錄一下樣式的設定，稍加修改就好了

話不多說，直接上代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        a{
            text-decoration: none;
        }
        li{
            list-style: none;
        }
        .nav{
            width: 600px;
            height: 40px;
            background-color: black;
            margin: 40px auto 0;
        }
        .nav li{
            float: left;
            margin-right: 10px;
            margin-left: 10px;
            position: relative;
        }
        .nav li a{
            display: block;
            height: 40px;
            width: 100px;
            text-align: center;
            background-color: #c1727f;
            line-height: 40px;
            color: #fff;
        }
        .nav li .nav2{
            display: none;
            left: -10px;
        }
        .nav li .nav2 li a{
            background-color: orange;
        }
        .nav li .nav2 li a:hover{
            background-color: #c1727f;
        }
        .nav li a:hover{
            background-color: lightcoral;
        }
        .nav li:hover .nav2{
            display: block;
            position: absolute;
        }
        .banner{
            width: 800px;
            height: 350px;
            margin: 0 auto;
            background: yellow;
            line-height: 350px;
            text-align: center;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li>
            <a href="#">產品中心</a>
            <ul class="nav2">
                <li><a href="#">產品1</a></li>
                <li><a href="#">產品2</a></li>
                <li><a href="#">產品3</a></li>
            </ul>
        </li>
        <li>
            <a href="#">游戲中心</a>
            <ul class="nav2">
                <li><a href="#">產品1</a></li>
                <li><a href="#">產品1</a></li>
                <li><a href="#">產品1</a></li>
            </ul>
        </li>
        <li>
            <a href="#">電影中心</a>
            <ul class="nav2">
                <li><a href="#">產品1</a></li>
                <li><a href="#">產品1</a></li>
                <li><a href="#">產品1</a></li>
            </ul>
        </li>
        <li>
            <a href="#">娛樂中心</a>
            <ul class="nav2">
                <li><a href="#">產品1</a></li>
                <li><a href="#">產品1</a></li>
                <li><a href="#">產品1</a></li>
            </ul>
        </li>
        <li>
            <a href="#">教育中心</a>
            <ul class="nav2">
                <li><a href="#">產品1</a></li>
                <li><a href="#">產品1</a></li>
                <li><a href="#">產品1</a></li>
            </ul>
        </li>
    </ul>
    <div class="banner">
        輪播圖
    </div>
</body>
</html>

稍加解釋：無序串列嵌套實作二級選單，樣式設定定位，把握好寬高及邊距即可

效果圖如下：

完畢，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/553773.html

標籤：Html/Css

上一篇：最佳實踐：基于vite3的monorepo前端工程搭建

下一篇：返回列表