今天我們來談一下如何使用CSS實現多個導航排成豎列的效果。 首先，我們需要在HTML中定義我們的導航欄。這個例子中我們使用了兩個導航欄，每個導航欄都有自己的class。 `````` 接下來，我們需要使用CSS來讓這兩個導航欄排成豎列。我們可以使用flexbox布局來實現這個效果。 ``` .nav1, .nav2 { display: flex; flex-direction: column; align-items: center; } .nav1 ul, .nav2 ul { list-style: none; padding: 0; margin: 0; } .nav1 li, .nav2 li { margin: 10px 0; } .nav1 a, .nav2 a { color: #333; text-decoration: none; font-size: 18px; font-weight: bold; } .nav1 a:hover, .nav2 a:hover { color: #00c7eb; } ``` 這段CSS代碼中，我們通過設置導航欄的display屬性為flex來啟用flexbox布局。我們進一步設置flex-direction為column來讓元素豎直排列。align-items屬性用于定義如何在容器中對齊元素，這里我們設置為居中對齊。然后，我們對ul和li以及鏈接進行一些基本的樣式設置。在此過程中，我們還添加了:hover偽類，以在鏈接上懸停時改變它們的顏色。 最終的效果如下圖所示：  總之，使用flexbox布局可以輕松實現多個導航欄的豎列排列效果，讓你的網站更加易用。