CSS導航垂直欄是一個在網站導航中經常使用的布局。它可以給用戶提供一個明確的導航方式，使用戶能夠很容易地找到需要的網頁內容。 下面是一個簡單的垂直導航欄的樣例：

<ul>
<li><a href="#">菜單1</a></li>
<li><a href="#">菜單2</a></li>
<li><a href="#">菜單3</a></li>
<li><a href="#">菜單4</a></li>
</ul>

在上面的例子中，我們用<ul>和<li>元素來創建我們的導航，這是最簡單和最常見的方式。 我們為每個菜單項創建一個<li>元素，將超鏈接嵌套在其中，并用<ul>作為容器元素將它們包裹起來。 我們可以使用CSS樣式來美化我們的導航。下面是一個使用CSS美化的垂直導航欄的樣例：

<ul class="nav">
<li><a href="#">菜單1</a></li>
<li><a href="#">菜單2</a></li>
<li><a href="#">菜單3</a></li>
<li><a href="#">菜單4</a></li>
</ul>

在上面的例子中，我們為nav類應用了一些樣式，包括去除列表樣式，添加背景色和邊距等。我們還為每個菜單項添加了樣式，包括設置字體大小和顏色等，鼠標滑過時將樣式應用于鏈接。 總結：垂直導航欄使我們的網頁導航非常清晰和易于使用，而CSS使我們能夠將導航樣式化，以增加視覺吸引力和易用性。