在網頁設計中，下拉列表（dropdown list）是一個常見而實用的元素。通過選擇下拉列表中的選項，用戶可以快速地從多個選項中選擇一個。下拉列表可以使用 HTML 和 CSS 來實現。在 CSS 中，下拉列表可以水平或縱向顯示。下面我們就來講一下 CSS 下拉列表縱向顯示的方法。

<div class="dropdown">
<button class="dropbtn">選擇國家</button>
<div class="dropdown-content">
<a href="#">中國</a>
<a href="#">美國</a>
<a href="#">加拿大</a>
<a href="#">日本</a>
<a href="#">韓國</a>
</div>
</div>

以上是 HTML 代碼。首先我們要創建一個 div 元素，設置 class 為 dropdown。在 div 元素內部，我們創建一個 button 元素，設置 class 為 dropbtn，用來作為下拉列表的按鈕。接下來，我們創建一個 div 元素，設置 class 為 dropdown-content，用來放置下拉列表的選項。

.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}

以上是 CSS 代碼。首先，我們對 .dropdown 元素進行設置，使其 position 屬性為 relative，display 屬性為 inline-block。接下來，對 .dropdown-content 元素進行設置，使其 display 屬性為 none，position 屬性為 absolute，z-index 屬性為 1，表示該元素在層疊順序上比其它元素更靠前。最后，我們通過 :hover 偽類選擇器，設置 .dropdown:hover .dropdown-content，使其在 .dropdown 元素被鼠標懸停時，下拉列表的選項才會顯示出來。

通過以上代碼，我們可以實現 CSS 下拉列表縱向顯示的效果。