在前端開發(fā)中，使用CSS的ul li來實(shí)現(xiàn)導(dǎo)航欄是非常常見的。但是，當(dāng)導(dǎo)航欄中的選項(xiàng)較多時(shí)，會(huì)占據(jù)大量的頁面空間，使得頁面顯得過于擁擠。這時(shí)，我們可以使用CSS的滑動(dòng)隱藏效果來解決問題。

<ul class="navigation">
<li>首頁</li>
<li>產(chǎn)品介紹</li>
<li>服務(wù)優(yōu)勢</li>
<li>新聞中心</li>
<li>聯(lián)系我們</li>
<li class="more">更多選項(xiàng)</li>
</ul>
<style>
.navigation {
list-style: none;
}
.navigation li {
display: inline-block;
padding: 10px;
margin-right: 10px;
cursor: pointer;
}
.more {
position: relative;
}
.more:hover ul {
opacity: 1;
visibility: visible;
}
.more ul {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
background-color: #fff;
border: 1px solid #ccc;
padding: 10px;
opacity: 0;
visibility: hidden;
transition: all .3s ease;
text-align: center;
}
.more ul li {
display: block;
padding: 5px;
margin: 5px 0;
cursor: pointer;
}
</style>

在以上代碼中，我們首先將ul的樣式設(shè)置為不帶任何符號(hào)的列表樣式。然后設(shè)置每個(gè)li元素為行內(nèi)塊元素，添加一定的間距和鼠標(biāo)可點(diǎn)擊的cursor樣式。

接著，我們針對(duì)最后一個(gè)li元素添加一個(gè)more類，并將其樣式設(shè)置為相對(duì)定位。當(dāng)鼠標(biāo)懸浮于該元素上時(shí)，我們使用:hover偽類來使得其下一個(gè)ul元素顯示出來。同時(shí)，我們使用絕對(duì)定位將該元素設(shè)置在父元素下方，使其下拉顯示的效果更加自然。

最后，我們?yōu)楦噙x項(xiàng)下拉出來的ul元素設(shè)置樣式，使其居中并添加一定的背景色和邊框。每個(gè)li元素也按照正常的樣式添加，只需要設(shè)置為塊元素即可。

上述代碼即是實(shí)現(xiàn)CSS的滑動(dòng)隱藏效果的基本代碼，希望對(duì)大家有所幫助。