<div class="nav"> <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> </div>以上代碼是一個基礎框架，在此基礎上，我們需要添加CSS代碼來實現它的外觀和行為。 我們首先需要對每個元素進行基本的樣式設置。如下所示：

.nav{
background: #f2f2f2;
width: 200px;
height: 100vh;
position: fixed;
top: 0;
left: -200px;
transition: 0.5s;
z-index: 9999;
}
.nav ul{
list-style: none;
margin: 0;
padding: 0;
}
.nav li{
padding: 10px 0;
border-top: 1px solid #ccc;
}
.nav li:first-child{
border-top: none;
}
.nav a{
color: #333;
text-decoration: none;
display: block;
padding: 5px 10px;
}

以上代碼設置了導航欄的背景顏色、寬度、高度和定位等，其中transition屬性實現了導航欄的動畫效果。接下來，我們將導航欄設置為‘懸停’狀態：

.nav:hover{
left: 0;
}

以上代碼實現了當鼠標懸停在導航欄上時，導航欄將出現在網頁的左側。 最后，我們需要添加JS代碼，使得當用戶單擊導航欄之外的內容時，導航欄會自動消失。如下所示：

以上代碼實現了當用戶單擊除導航欄之外的任何元素時，導航欄都會自動收縮。這樣，我們就成功實現了一個基本的div css豎導航。