使用CSS豎向下拉菜單如何實現？ 下拉菜單是網頁設計的常見元素之一，這篇文章將介紹如何使用CSS實現一個簡單的豎向下拉菜單。我們將使用HTML中的無序列表來創建菜單，CSS負責布局和樣式。 第一步：創建HTML結構 我們使用ul和li標簽來創建菜單的HTML結構。在ul標簽里包含幾個li標簽，每個li標簽代表一個菜單選項。下面是一個簡單的例子。

<ul class="menu">
<li>Home</li>
<li>About Us</li>
<li>Contact</li>
<li>Services
<ul>
<li>Web Development</li>
<li>Graphic Design</li>
<li>SEO</li>
</ul>
</li>
</ul>

在這個例子中，我們創建了一個包含四個菜單選項的無序列表。其中，Services選項是可折疊的一個子菜單，它包含三個子選項。 第二步：使用CSS樣式選項 我們來添加下拉菜單的CSS樣式。為了讓子菜單隱藏，并且當鼠標懸停在父菜單上時子菜單顯示，我們使用了:hover偽類。具體的CSS代碼如下：

.menu {
list-style-type:none;
margin:0;
padding:0;
background-color: #f1f1f1;
}
.menu li {
display:block;
position:relative;
float:left;
}
.menu li a {
display:block;
padding:8px 12px;
color:#333;
text-decoration:none;
font-weight:bold;
}
.menu li:hover {
background-color:#ccc;
}
.menu ul {
position:absolute;
top:100%;
left:0;
padding:0;
margin:0;
display:none;
}
.menu li:hover >ul {
display:list-item;
}

第三步：樣式說明 .menu和.menu li是菜單和菜單選項的基本樣式。我們把菜單選項展示為塊元素，并使用相對定位（position: relative），這是為了讓在菜單選項內部創建子元素更容易。 .menu li a是菜單選項的文本樣式。 .menu li:hover是當鼠標懸停在一個菜單選項上時，觸發的樣式。 .menu ul是下拉菜單的樣式，我們把它絕對定位在父菜單的下方，并將display設置為none以便在默認情況下將其隱藏。 .menu li:hover >ul是當鼠標懸停在一個菜單選項上時，觸發下拉菜單出現的樣式。 第四步：運行效果展示 完成以上3步后，最終的效果應該是這樣的：  到這里，我們就完成了一個使用CSS實現的簡單豎向下拉菜單！