在網(wǎng)頁開發(fā)的過程中，折疊多選菜單是一種非常方便的工具。而在實(shí)現(xiàn)折疊多選菜單時(shí)，CSS是必不可少的一個(gè)工具。下面我們就來看一下如何利用CSS來實(shí)現(xiàn)一個(gè)簡(jiǎn)單的折疊多選菜單示例。

<div class="menu">
<ul>
<li class="parent">
<a href="#">父級(jí)菜單1</a>
<ul class="children">
<li><a href="#">子菜單1</a></li>
<li><a href="#">子菜單2</a></li>
<li><a href="#">子菜單3</a></li>
</ul>
</li>
<li class="parent">
<a href="#">父級(jí)菜單2</a>
<ul class="children">
<li><a href="#">子菜單4</a></li>
<li><a href="#">子菜單5</a></li>
<li><a href="#">子菜單6</a></li>
</ul>
</li>
</ul>
</div>

首先，我們需要先設(shè)置一個(gè)包含所有菜單的div，并在其內(nèi)部設(shè)置ul和li來實(shí)現(xiàn)菜單的嵌套結(jié)構(gòu)。其中，每一個(gè)擁有子菜單的li需要設(shè)置為.parent類，而其內(nèi)部的ul則需要設(shè)置為.children類。

.menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu .parent {
position: relative;
}
.menu .children {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
padding: 10px;
}
.menu .parent:hover .children {
display: block;
}

接下來，我們需要設(shè)置CSS屬性來實(shí)現(xiàn)折疊、伸展菜單的效果。其中，我們使用了position、display、top、left、background-color、border、box-shadow、padding等屬性來實(shí)現(xiàn)菜單的基本樣式。而當(dāng)鼠標(biāo)移到父級(jí)菜單上時(shí)，我們則需要將其內(nèi)部的子菜單顯示出來，這個(gè)效果可以通過設(shè)置.parent:hover .children的display屬性為block來實(shí)現(xiàn)。

最后，我們只需要將上述兩段CSS代碼放在標(biāo)簽內(nèi)部，并與HTML代碼一起加入到頁面中即可完成折疊多選菜單的示例。