水平導航在網站設計中是一個非常常見的元素，通過CSS的樣式設置可以實現不同的效果。下面是一個用CSS寫水平導航的示例代碼：

nav {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #F2F2F2;
height: 60px;
}
nav a {
color: #333;
text-decoration: none;
font-size: 18px;
padding: 0 10px;
}
nav a:hover {
color: #1E90FF;
}

上述代碼定義了一個包含水平導航的nav元素，設置了它的背景顏色、高度和 flex 布局相關的樣式，使得導航中的鏈接能夠水平排列，并自動分配寬度。每個鏈接都具有獨自的顏色、大小和內邊距設置，以增加可讀性，同時鼠標移至鏈接上時，文字顏色會改變，提高用戶體驗。

通過CSS的樣式設置，我們可以根據需求創建出各種不同類型的導航菜單，如 Tab 切換、下拉式、側邊欄菜單等。這些導航菜單不僅能夠優化用戶的瀏覽體驗，還能提高網站的可見性和可用性。