在網頁設計中，設計一個美觀實用的菜單樣式至關重要，如何使用CSS來實現呢？

/* 首先定義菜單樣式的父元素 */
.menu {
display: flex; /* 使用flex布局 */
justify-content: center; /* 居中對齊 */
background-color: #f2f2f2; /* 背景顏色 */
padding: 10px; /* 邊距 */
}
/* 定義菜單項的樣式 */
.menu li {
margin: 0 10px; /* 項之間的間距 */
}
/* 定義菜單項的鏈接樣式 */
.menu a {
color: #333; /* 鏈接顏色 */
font-weight: 600; /* 字體加粗 */
text-decoration: none; /* 去掉下劃線 */
padding: 5px; /* 給鏈接設置邊距 */
border-bottom: 2px solid transparent; /* 底部邊框 */
}
/* 定義菜單項的鼠標懸停樣式 */
.menu a:hover {
border-bottom-color: #666; /* 底部邊框顏色變化 */
}

通過上述CSS代碼，我們實現了一個簡單的水平居中對齊的菜單樣式，同時給菜單項設置了懸停效果，讓菜單更加美觀實用。

如果需要實現垂直排列的菜單，也可以使用類似的方法，在父元素上設置flex-direction屬性為column即可。