在網頁的設計中，菜單是網頁的一個重要組成部分。一個美觀、易用且符合設計主題的菜單將大大提升用戶的體驗。而CSS菜單則是實現這個目標的關鍵。下面將介紹如何創建一個漂亮的CSS菜單。

ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin-right: 20px;
position: relative;
}
a {
display: block;
text-decoration: none;
color: #333;
font-size: 18px;
font-weight: bold;
padding: 10px 15px;
}
a:hover {
color: #fff;
background-color: #333;
}
ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
border-radius: 0 0 4px 4px;
z-index: 999;
}
ul li:hover >ul {
display: block;
}
ul ul li {
display: block;
width: 200px;
margin: 0;
}
ul ul li a {
font-size: 14px;
padding: 8px 15px;
}
ul ul li a:hover {
color: #fff;
background-color: #333;
}

上面的代碼是一個基礎的CSS菜單樣式，它包括了菜單項、下拉菜單、懸停狀態等基本效果。為了實現菜單效果，我們先定義了一個無序列表來容納菜單項，并對每個菜單項進行一些基本的樣式定義，如去除默認列表樣式、定義為inline-block、設置右側外邊距、相對定位等，這些都是為了下一步創建下拉菜單效果做準備。

同時，為了實現下拉菜單的效果，我們在每個菜單項中創建了一個無序列表，用于展示下拉菜單項，并定義了一個懸停狀態hover，觸發該狀態時，下拉菜單會顯示出來。

在下拉菜單的樣式定義中，我們采用了絕對定位，并設置了z-index。同時，為了增加下拉菜單的美觀性，我們對它進行了一些圓角處理。

最后，我們對下拉菜單中的菜單項進行了進一步的樣式定義，使得菜單看起來更加美觀，同時在hover狀態下，字體和背景色也會發生相應變化，提高了交互性。

使用這些樣式，你可以輕松地創建一個漂亮且易用的CSS菜單，為你的網頁設計添加更多亮點。