CSS級(jí)三菜單是Web前端設(shè)計(jì)中經(jīng)常使用的一種菜單制作方式，它可以讓網(wǎng)頁菜單的層次更加清晰、美觀，方便用戶進(jìn)行操作。下面介紹幾種常見的CSS級(jí)三菜單的制作方法。

方法一：使用CSS偽類:hover實(shí)現(xiàn)

/* HTML代碼 */
<ul>
<li>一級(jí)菜單1
<ul>
<li>二級(jí)菜單1
<ul>
<li>三級(jí)菜單1</li>
<li>三級(jí)菜單2</li>
</ul>
</li>
<li>二級(jí)菜單2</li>
</ul>
</li>
<li>一級(jí)菜單2</li>
</ul>
/* CSS代碼 */
ul ul ul {
display: none;
}
ul li:hover > ul {
display: block;
}

利用CSS中的:hover偽類，當(dāng)鼠標(biāo)滑過一級(jí)菜單時(shí)，顯示它的子菜單；當(dāng)鼠標(biāo)滑過二級(jí)菜單時(shí)，顯示它的子菜單。注意使用display:none使子菜單一開始不可見。

方法二：使用CSS中的:checked實(shí)現(xiàn)

/* HTML代碼 */
<ul>
<li>一級(jí)菜單1
<input type="checkbox" name="menu">
<ul>
<li>二級(jí)菜單1
<input type="checkbox" name="submenu">
<ul>
<li>三級(jí)菜單1</li>
<li>三級(jí)菜單2</li>
</ul>
</li>
<li>二級(jí)菜單2</li>
</ul>
</li>
<li>一級(jí)菜單2</li>
</ul>
/* CSS代碼 */
input[name="menu"], input[name="submenu"] {
display: none;
}
input[name="menu"]:checked + ul,
input[name="submenu"]:checked + ul {
display: block;
}

在HTML中添加checkbox的input，然后在CSS中利用:checked選擇器判斷是否選中，再?zèng)Q定是否顯示子菜單。注意使用display:none使子菜單一開始不可見。

方法三：使用CSS中的:target實(shí)現(xiàn)

/* HTML代碼 */
<ul>
<li><a href="#menu1">一級(jí)菜單1</a>
<ul id="menu1">
<li><a href="#submenu1">二級(jí)菜單1</a>
<ul id="submenu1">
<li>三級(jí)菜單1</li>
<li>三級(jí)菜單2</li>
</ul>
</li>
<li>二級(jí)菜單2</li>
</ul>
</li>
<li>一級(jí)菜單2</li>
</ul>
/* CSS代碼 */
ul ul {
display: none;
}
ul:target ul {
display: block;
}

在HTML中使用錨點(diǎn)a href加上id，然后在CSS中利用:target選擇器選中指定的子菜單。注意使用display:none使子菜單一開始不可見。

總之，利用CSS制作級(jí)三菜單可以盡可能地減少JS代碼的使用，提高網(wǎng)頁的運(yùn)行效率，有助于提升網(wǎng)站的用戶體驗(yàn)。