垂直導航欄可以為網站提供清晰和易于導航的菜單。CSS是構建垂直導航欄的最佳工具。

nav{
width: 200px;
/*設置導航欄的寬度*/
background-color: #333;
/*設置導航欄的背景顏色*/
color: #fff;
/*設置導航欄中字體顏色的變化*/
}
nav ul{
margin: 0;
/*取消導航欄中ul的默認外邊距*/
padding: 0;
/*取消導航欄中ul的默認內邊距*/
list-style: none;
/*去掉ul中的圓點*/
}
nav li{
padding: 10px 0;
/*設置每個菜單項的上下內邊距為10像素*/
text-align: center;
/*設置菜單項內文本居中對齊*/
}
nav a{
text-decoration: none;
/*去除鏈接的下劃線*/
color: #fff;
/*設置鏈接的字體顏色為白色*/
display: block;
/*將鏈接設置為塊元素*/
}
nav a:hover{
background-color: #555;
/*當鼠標移到鏈接上時，菜單項背景顏色變為#555*/
}

使用上述代碼，可以構建一個簡單的垂直導航欄。需要注意的是，在HTML中使用ul和li元素來創建導航欄，并為每個鏈接設置href屬性。