CSS中的導航菜單是網頁制作中非常常見的一個元素，它能夠幫助用戶快速地瀏覽和訪問網頁中的內容。其中，橫向導航菜單和豎向導航菜單是兩種常見的布局方式。

/* 橫向導航菜單的樣式 */
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin-right: 20px;
}
a {
text-decoration: none;
color: #333;
font-size: 16px;
padding: 10px;
border-radius: 5px;
transition: background-color 0.3s ease;
}
a:hover {
background-color: #333;
color: #fff;
}
/* 豎向導航菜單的樣式 */
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
margin-bottom: 10px;
}
a {
text-decoration: none;
color: #333;
font-size: 16px;
padding: 10px;
border-radius: 5px;
transition: background-color 0.3s ease;
display: block;
}
a:hover {
background-color: #333;
color: #fff;
}

上面的代碼分別展示了橫向導航菜單和豎向導航菜單的樣式。其中，橫向導航菜單使用了inline-block布局，而豎向導航菜單使用了block布局。同時，兩種樣式都使用了CSS的一些基本屬性，如list-style、margin、padding、text-decoration、color、font-size等。

在實際使用中，我們可以根據具體情況來選擇使用哪種導航菜單布局方式。如果頁面寬度比較寬，且導航菜單的選項比較多，那么橫向導航菜單可能更為適用；而如果頁面比較窄，或者導航菜單選項比較少，那么豎向導航菜單可能更為合適。