HTML/CSS 二級選單

木木木森林發表於2021-01-03
HTMLCSS

HTML/CSS 二級選單


程式碼： 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        a {
            text-decoration: none;
            color: #000;;
            font-size: 14px;
            
            }
        a:hover {
            color: rgb(253, 141, 114);
        }
        li , ul{
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

        ul.container li {
            width: 187px;
            height: 30px;
            line-height: 30px;
            padding-left: 5px;
            border-bottom: 1px dashed rgb(204, 204, 204);
        }
        .container {
            position: relative;
            width: 192px;
            border: 1px solid rgb(204, 204, 204);
            background-color: rgb(2550, 250, 250);
            margin: 50px auto;
        }

        .sub-container {
            position: absolute;
            top: -1px;
            left: 192px;
            display: none;
            width: 300px;
            border: 1px solid blue;
        }

        .container li:hover .sub-container {
            display: block;
            height: 100%;
        }
    </style>
</head>
<body>
    <ul class="container">
        <li>
            <a href="#">家用電器</a>
            <div class="sub-container">111</div>
        </li>
    
        <li>
            <a href="#">手機 / 運營商 / 數碼</a>
            <div class="sub-container">222</div>    
        </li>

        <li>
            <a href="#">電腦 / 辦公</a>
            <div class="sub-container">333</div>    
        </li>

        <li>
            <a href="#">家居 / 傢俱 / 裝潢 / 廚具</a>
            <div class="sub-container">444</div>    
        </li>

        <li>
            <a href="#">男裝 / 女裝 / 童裝 / 內衣</a>
            <div class="sub-container">555</div>    
        </li>

        <li>
            <a href="#">美妝 / 個護清潔 / 寵物</a>
            <div class="sub-container">666</div>    
        </li>

        <li>
            <a href="#">女裝 / 箱包 / 鐘錶 / 珠寶</a>
            <div class="sub-container">777</div>    
        </li>

        <li>
            <a href="#">男鞋 / 運動 / 戶外</a>
            <div class="sub-container">888</div>    
        </li>

        <li>
            <a href="#">房產 / 汽車 / 汽車用品</a>
            <div class="sub-container">999</div>    
        </li>

        <li>
            <a href="#">母嬰 / 玩具樂器</a>
            <div class="sub-container">aaa</div>    
        </li>

        <li>
            <a href="#">食品 / 酒類 / 生鮮 / 特產</a>
            <div class="sub-container">bbb</div>    
        </li>

        <li>
            <a href="#">藝術 / 禮品鮮花 / 農資綠植</a>
            <div class="sub-container">ccc</div>    
        </li>

        <li>
            <a href="#">醫藥保健 / 計生情趣</a>
            <div class="sub-container">ddd</div>    
        </li>

        <li>
            <a href="#">圖書 / 文娛 / 教育 / 電子書</a>
            <div class="sub-container">eee</div>    
        </li>

        <li>
            <a href="#">機票 / 酒店 / 旅遊 / 生活</a>
            <div class="sub-container">fff</div>    
        </li>

        <li>
            <a href="#">理財 / 眾籌 / 白條 / 保險</a>
            <div class="sub-container">ggg</div>    
        </li>

        <li>
            <a href="#">安裝 / 維修 / 清洗 / 二手</a>
            <div class="sub-container">hhh</div>    
        </li>

        <li>
            <a href="#">工業品</a>
            <div class="sub-container">iii</div>    
        </li>
    </ul>
</body>
</html>

顯示：
在這裡插入圖片描述

相關文章