今天我們來探討一下如何使用CSS來制作一個好看的豎導航。 首先，我們需要一個ul標簽作為我們的導航菜單的容器。然后，給ul標簽添加一個class或id，方便我們后面的樣式控制。

首頁
關于我們
新聞中心
產品展示
聯系我們

接下來，我們要為每個導航項添加樣式。我們可以使用偽類:hover來控制鼠標懸停時的效果，使導航菜單更加生動有趣。此外，我們還可以添加一些過渡動畫效果，使導航菜單更加優雅。

.nav-menu li {
list-style: none;
margin-bottom: 10px;
padding-left: 10px;
line-height: 40px;
border-radius: 5px;
transition: all 0.3s ease-in-out;
}
.nav-menu li:hover{
background-color: #EFB7B7;
transform: translateX(10px);
}
.nav-menu li a {
text-decoration: none;
color: #333;
}

最后，我們還可以為整個導航菜單添加一個邊框，使其更加美觀。同樣的，我們可以添加一些過渡效果，使邊框顯示出漸變的效果。

.nav-menu {
border: 1px solid #ddd;
border-radius: 5px;
overflow: hidden;
transition: border 0.3s ease-in-out;
}
.nav-menu:hover {
border: 1px solid #EFA3A3;
}

好啦，以上就是制作一個好看的豎導航的全部步驟。通過CSS的靈活運用，我們可以輕松地實現一個簡單而美觀的導航菜單。