本文目錄導(dǎo)讀：

1. HTML結(jié)構(gòu)
2. CSS樣式
3. JavaScript交互效果（可選）

如何設(shè)置CSS二級(jí)菜單

在網(wǎng)頁(yè)設(shè)計(jì)中，CSS二級(jí)菜單的設(shè)置是一種常見(jiàn)的需求，二級(jí)菜單不僅可以增加網(wǎng)站的導(dǎo)航功能，還可以提升網(wǎng)站的整體美觀，如何設(shè)置CSS二級(jí)菜單呢？

HTML結(jié)構(gòu)

我們需要?jiǎng)?chuàng)建一個(gè)HTML結(jié)構(gòu)來(lái)承載二級(jí)菜單，我們可以使用無(wú)序列表（ul）和列表項(xiàng)（li）來(lái)構(gòu)建二級(jí)菜單。

<ul class="main-menu">
    <li><a href="#">一級(jí)菜單</a>
        <ul class="sub-menu">
            <li><a href="#">二級(jí)菜單1</a></li>
            <li><a href="#">二級(jí)菜單2</a></li>
            <li><a href="#">二級(jí)菜單3</a></li>
        </ul>
    </li>
    <li><a href="#">一級(jí)菜單2</a></li>
    <li><a href="#">一級(jí)菜單3</a></li>
</ul>

CSS樣式

我們需要使用CSS來(lái)美化二級(jí)菜單，我們可以設(shè)置二級(jí)菜單的樣式，如顏色、字體、背景等。

.main-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
}
.main-menu li {
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
}
.main-menu li a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #333;
    border-right: 1px solid #ccc;
}
.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    min-width: 160px;
    padding: 15px 0;
    margin: 0;
    list-style: none;
    background-color: #fff;
    border: 1px solid #ccc;
    border-top: 0;
}
.sub-menu li {
    position: relative;
    float: left;
    width: 100%;
}
.sub-menu li a {
    display: block;
    width: 100%;
    padding: 10px;
    text-decoration: none;
    color: #333;
}

JavaScript交互效果（可選）

為了讓二級(jí)菜單更加實(shí)用和美觀，我們可以使用JavaScript來(lái)添加一些交互效果，當(dāng)鼠標(biāo)懸停在一級(jí)菜單上時(shí)，顯示對(duì)應(yīng)的二級(jí)菜單，這種效果可以通過(guò)JavaScript的鼠標(biāo)事件和CSS的顯示/隱藏屬性來(lái)實(shí)現(xiàn)，具體實(shí)現(xiàn)方式可以根據(jù)實(shí)際需求進(jìn)行調(diào)整。