CSS二級(jí)菜單代碼怎么寫？

在CSS中，我們可以使用嵌套的列表來創(chuàng)建二級(jí)菜單，以下是一個(gè)簡(jiǎn)單的示例，展示了如何實(shí)現(xiàn)這一功能：

1、HTML結(jié)構(gòu)：

<ul class="main-menu">
    <li>菜單項(xiàng)1
        <ul class="sub-menu">
            <li>子菜單項(xiàng)1</li>
            <li>子菜單項(xiàng)2</li>
            <li>子菜單項(xiàng)3</li>
        </ul>
    </li>
    <li>菜單項(xiàng)2
        <ul class="sub-menu">
            <li>子菜單項(xiàng)4</li>
            <li>子菜單項(xiàng)5</li>
            <li>子菜單項(xiàng)6</li>
        </ul>
    </li>
    <li>菜單項(xiàng)3</li>
    <li>菜單項(xiàng)4</li>
    <li>菜單項(xiàng)5</li>
    <li>菜單項(xiàng)6</li>
</ul>

2、CSS樣式：

.main-menu {
    list-style-type: none;
    padding: 0;
}
.main-menu > li {
    position: relative;
    display: block;
}
.sub-menu {
    list-style-type: none;
    position: absolute;
    top: 100%;
    left: 0;
    padding: 0;
    display: none; /* 初始狀態(tài)隱藏 */
}
.main-menu > li:hover .sub-menu { /* 當(dāng)鼠標(biāo)懸停在主菜單項(xiàng)上時(shí)顯示子菜單 */
    display: block;
}

在這個(gè)示例中，我們使用了position: relative來定位主菜單項(xiàng)，并使用position: absolute來定位子菜單，子菜單的top屬性設(shè)置為100%，使其位于主菜單項(xiàng)的下方，我們使用display: none來初始隱藏子菜單，并在鼠標(biāo)懸停在主菜單項(xiàng)上時(shí)通過CSS偽類:hover使其顯示。