CSS縱向懸浮菜單是一種非常實用的UI設計效果，它可以幫助網站設計者更好地展示導航欄信息和分類內容。下面我們來了解一下如何通過CSS實現縱向懸浮菜單效果。

/*CSS代碼*/
.menu{
position: fixed; /*固定定位*/
top: 50%; /*距離頂部的距離*/
left: 0; /*距離左側的距離*/
transform: translateY(-50%); /*位移到垂直居中的位置*/
}
.menu li{
list-style: none; /*去除列表樣式*/
margin-bottom: 10px; /*菜單選項之間的間距*/
transform: translateX(-100%);
transition: transform .3s ease-in-out; /*添加過渡效果*/
}
.menu li:hover{
transform: translateX(0);
}

首先，我們需要一個列表，在列表內放入對應的導航欄選項，每一個選項都有相同的類名menu li。接下來通過CSS設置目標樣式，首先設置需要將懸浮菜單固定定位到屏幕上，這樣在向下滾動時，導航欄就會一直出現在用戶視線范圍內。

再設置菜單在垂直方向的居中位置，通過transform的translateY(-50%)屬性，即可做到垂直居中，接著去掉列表的樣式，讓菜單選項變成懸浮狀態，這里我們將菜單選項的transform屬性都設為translateX(-100%)，并添加過渡效果transition: transform .3s ease-in-out;。

當鼠標懸浮在某個菜單選項上時，我們將其transform屬性設為translateX(0)，這樣就可以實現了縱向懸浮菜單效果。

總結起來，通過以上的CSS代碼，我們可以有效地實現一個縱向懸浮菜單效果。在實際項目中，我們可以根據自己的需求調整樣式和效果，使得菜單更加美觀實用。