菜單是網站設計中不可或缺的一部分，而菜單樣式則是決定菜單外觀的重要因素之一。為實現不同的菜單效果，我們需要運用 CSS 技術。下面將通過 pre 標簽來展示一些常用的菜單樣式代碼。

// 一級水平菜單樣式
nav ul {
list-style: none;
display: flex;
justify-content: center;
padding: 0;
background-color: lightgray;
}
nav li {
margin: 0 10px;
}
nav a {
display: block; 
padding: 10px;
text-decoration: none;
color: black;
}
nav a:hover {
color: white;
background-color: red;
}
// 垂直菜單樣式
nav ul {
list-style: none;
margin: 0;
padding: 0;
width: 200px;
background-color: lightgray;
}
nav li {
margin: 0;
border-bottom: 1px solid white;
}
nav a {
display: block;
padding: 10px;
color: black;
text-decoration: none;
}
nav a:hover {
color: white;
background-color: red;
}
// 下拉菜單樣式
nav ul {
list-style: none;
margin: 0;
padding: 0;
background-color: lightgray;
}
nav li {
margin: 0;
position: relative;
}
nav li:hover >ul {
display: block;
}
nav a {
display: block;
padding: 10px;
color: black;
text-decoration: none;
}
nav a:hover {
color: white;
background-color: red;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: gray;
}
nav ul ul li {
border-bottom: 1px solid white;
}

以上是常用的三個菜單樣式示例，分別展示了一級水平菜單、垂直菜單和下拉菜單。用戶可以根據實際需求對樣式進行修改，以便得到更好的菜單視覺效果。