CSS 下拉菜單是網(wǎng)頁設計中經(jīng)常使用的一種交互元素，它能夠讓用戶更方便地查看和選擇網(wǎng)頁中的不同選項。除了常見的垂直下拉菜單之外，我們也可以使用 CSS 實現(xiàn)橫向下拉菜單。

HTML 代碼結構如下：
<ul class="menu">
<li><a href="#">選項一</a></li>
<li><a href="#">選項二</a></li>
<li><a href="#">選項三</a>
<ul>
<li><a href="#">子選項一</a></li>
<li><a href="#">子選項二</a></li>
<li><a href="#">子選項三</a></li>
</ul>
</li>
<li><a href="#">選項四</a></li>
</ul>
CSS 代碼如下：
.menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
}
.menu >li {
position: relative;
padding: 15px;
cursor: pointer;
transition: background-color 0.2s ease-out;
}
.menu >li:hover {
background-color: #ddd;
}
.menu ul {
position: absolute;
top: 100%;
left: 0;
z-index: 1;
display: none;
padding: 0;
margin: 0;
}
.menu li:hover >ul {
display: flex;
flex-direction: column;
}
.menu ul li {
padding: 10px;
background-color: #f2f2f2;
border-top: 1px solid #aaa;
cursor: pointer;
}
.menu ul li:hover {
background-color: #e1e1e1;
}
.menu ul li:first-of-type {
border-top: none;
}

通過對 HTML 結構的嵌套和對 CSS 樣式的控制，我們可以實現(xiàn)橫向下拉菜單的展現(xiàn)和交互效果。這樣的下拉菜單通常可以用于網(wǎng)站導航欄、控制面板等場景中，能夠提供更加直觀、清晰的用戶體驗。