CSS做出來的動態導航欄可以非常好的提升網站的用戶體驗，同時還能使網站更加美觀大方。其中一種常見的表現方式是導航欄豎著展示，在這里介紹一下如何實現這種效果。

html:
<div class="nav">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">產品</a></li>
<li><a href="#">服務</a></li>
<li><a href="#">聯系我們</a></li>
</ul>
</div>
css:
.nav {
display: flex;
flex-direction: column;
background-color: #f8f8f8;
border-right: 1px solid #e8e8e8;
width: 100px;
height: 300px;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.nav li {
width: 100%;
height: 75px;
text-align: center;
}
.nav li a {
display: block;
line-height: 75px;
text-decoration: none;
color: #666;
}
.nav li:hover a {
color: #333;
background-color: #f1f1f1;
}

上述代碼的實現方式很簡單，主要利用flex布局來定位元素，設置導航欄的方向為垂直方向。通過對li元素的寬高進行設置，使其在垂直方向布局整體導航的各個選項。同時，我們還可以通過:hover屬性來對選中的導航欄設置不同的背景顏色或文字顏色，以達到選中效果的目的。