今天我們來講一講CSS折疊導(dǎo)航欄的代碼。 首先，我們需要一個(gè)HTML結(jié)構(gòu)來承載我們的導(dǎo)航欄。它通常長這樣： `````` 接下來，我們需要編寫一些CSS來創(chuàng)建我們的折疊導(dǎo)航欄。我們可以使用偽類`:target`來與錨點(diǎn)配合使用來顯示和隱藏我們的導(dǎo)航。 ``` nav ul { list-style: none; margin: 0; padding: 0; } nav ul li { float: left; } nav ul li a { display: block; padding: 10px; color: #333; text-decoration: none; } nav ul li a:hover { color: #fff; background-color: #333; } nav >ul:target { display: block; } nav ul ul { display: none; position: absolute; top: 100%; } nav ul li:hover >ul { display: inherit; } nav ul ul li { float: none; position: relative; } nav ul ul ul { position: absolute; left: 100%; top: 0; } ``` 上面的CSS創(chuàng)建了一些基本樣式來為我們的導(dǎo)航欄奠定堅(jiān)實(shí)基礎(chǔ)?，F(xiàn)在我們需要一個(gè)方法來將我們的導(dǎo)航欄折疊起來。我們可以使用一個(gè)“隱藏”的錨點(diǎn)來完成這個(gè)目標(biāo)。我們把這個(gè)錨點(diǎn)放在，我們的HTML文件中最末尾的地方，并為它添加一個(gè)ID。 ```菜單``` 現(xiàn)在我們可以編寫一些額外的CSS來隱藏我們的導(dǎo)航欄。 ``` nav >ul { height: 0; overflow: hidden; transition: height 0.3s ease; } nav >ul:target { height: 200px; /* 這里的值可以任意設(shè)置 */ } ``` 現(xiàn)在我們可以使用“菜單”鏈接作為觸發(fā)器來打開和關(guān)閉我們的導(dǎo)航欄了。 完整的CSS代碼如下所示（建議將CSS文件單獨(dú)編寫并引用）： ``` nav ul { list-style: none; margin: 0; padding: 0; } nav ul li { float: left; } nav ul li a { display: block; padding: 10px; color: #333; text-decoration: none; } nav ul li a:hover { color: #fff; background-color: #333; } nav >ul { height: 0; overflow: hidden; transition: height 0.3s ease; } nav >ul:target { height: 200px; /* 這里的值可以任意設(shè)置 */ } nav ul ul { display: none; position: absolute; top: 100%; } nav ul li:hover >ul { display: inherit; } nav ul ul li { float: none; position: relative; } nav ul ul ul { position: absolute; left: 100%; top: 0; } ``` 希望以上內(nèi)容對(duì)你有所幫助。