導航菜單是網頁中常見的一種功能，它能夠有效地幫助用戶在網站上找到所需的內容。在 CSS 中，我們可以通過一些樣式設置來實現導航菜單的效果。下面我們來看看怎么編寫 CSS 樣式來實現導航菜單。

/* 設置導航菜單樣式 */
.nav {
list-style: none;  /* 去掉列表樣式 */
margin: 0;  /* 去掉外邊距 */
padding: 0;  /* 去掉內邊距 */
display: flex; /* 設置為彈性布局 */
justify-content: space-between; /* 設置橫向分布，每個菜單項間距相等 */
align-items: center; /* 垂直居中 */
background-color: #333; /* 設置背景顏色 */
color: #fff; /* 設置字體顏色 */
font-size: 18px; /* 設置字體大小 */
}
.nav li {
padding: 10px; /* 設置內邊距 */
cursor: pointer; /* 鼠標懸浮樣式 */
}
.nav li:hover {
background-color: #666; /* 鼠標懸浮時背景顏色變化 */
}
.nav a {
color: #fff; /* 設置字體顏色 */
text-decoration: none; /* 去掉鏈接下劃線 */
}
.nav a:hover {
text-decoration: underline; /* 鼠標懸浮下劃線 */
}

我們先創建一個 ul 列表，然后給它應用 .nav 類。對于 ul 標簽，我們去掉了列表樣式、外邊距和內邊距。接著使用 flex 彈性布局，實現菜單項的橫向分布，每個菜單項的間距相等。最后設置了菜單欄的背景顏色、字體顏色和字體大小。

然后分別對每個 li 列表項應用樣式，設置了內邊距、鼠標懸浮樣式和鼠標懸浮時背景顏色變化。對于 a 標簽，則去掉了下劃線，設置字體顏色，并添加了鼠標懸浮下劃線的樣式。

通過上述設置，我們就完成了一個簡單的導航菜單樣式。當然，實際項目中，可能需要更加復雜的樣式來實現特定的功能。不過這些基礎的設置對于理解 CSS 樣式編寫以及應用都是很有用的。