下拉式水平導航欄是網頁設計中經常使用到的一種元素，它通常用于網站的導航欄中，能夠幫助用戶更快地找到所需頁面。本文將介紹如何使用CSS創建一個下拉式水平導航欄。

/* 創建導航欄 */
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
/* 創建下拉菜單 */
.dropdown {
position: relative;
display: inline-block;
}
/* 定義菜單項 */
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
/* 鼠標滑過下拉菜單 */
.dropdown:hover .dropdown-content {
display: block;
}
/* 定義菜單鏈接 */
a {
display: block;
padding: 10px;
}
/* 給選中的鏈接添加背景色 */
a:hover {
background-color: #ddd;
}

以上代碼中，我們首先使用flex布局來創建一個導航欄。然后對“下拉式菜單”元素添加position:relative屬性，并為菜單打開時的下拉部分定義一個absolute的位置。此時，我們簡單地隱藏了下拉部分。當鼠標懸停在菜單上時，我們通過:hover偽類展現下拉菜單。

最后，針對菜單中包含的鏈接，我們定義了特定的樣式，包括鏈接的內邊距和鼠標懸停下的背景色。

通過這些步驟我們就可以很容易地創建一個漂亮的下拉水平導航欄，有助于提高網站的用戶友好度和用戶體驗。