在web設計中，菜單是非常重要的元素之一。它不僅能夠幫助用戶快速了解網站的結構和內容，還能通過優秀的設計提升用戶對網站的整體體驗。下面介紹幾個好看的CSS菜單設計。

.nav {
display: flex;
justify-content: center;
align-items: center;
height: 80px;
background-color: #f2f2f2;
}
.nav ul {
display: flex;
list-style: none;
}
.nav li {
margin: 0 20px;
}
.nav a {
text-decoration: none;
color: #333;
font-size: 16px;
font-weight: bold;
}
.nav a:hover {
color: #f00;
}

這是一個簡潔的橫向導航欄。通過使用Flex布局，能夠輕松地實現居中對齊。hover狀態下的顏色變化，增加了交互效果。

.dropdown {
display: inline-block;
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
}
.dropdown-content a:hover {
background-color: #f2f2f2;
}

這個CSS下拉菜單選擇了“Hover”作為顯示方式，當用戶懸浮在菜單上時，會顯示下拉內容。鼠標離開菜單后，下拉內容會自動隱藏。這是一個非常經典的設計，可以在很多地方使用。

.tab-menu {
display: flex;
justify-content: center;
margin-bottom: 30px;
}
.tab-menu button {
border: none;
outline: none;
background-color: inherit;
cursor: pointer;
margin: 0 10px;
padding: 10px 20px;
font-size: 16px;
font-weight: bold;
}
.tab-menu button.active {
border-bottom: 2px solid #f00;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
text-align: center;
padding: 30px 0;
font-size: 24px;
}

這個CSS選項卡菜單使用了CSS3的偽類功能，通過設置“button.active”和“.tab-content.active”類的樣式來控制選項卡的顯示和隱藏。通過添加不同的選項卡內容，可以輕松地實現一個使用美觀的選項卡導航。