在制作網頁時，菜單樣式是不可或缺的一部分。CSS可以實現各種各樣的菜單效果，下面是一些CSS菜單樣式大全。

/* 水平菜單 */
ul {
list-style:none;
margin:0;
padding:0;
display:flex;
}
li {
margin-right:20px;
}
a {
text-decoration:none;
color:#000;
padding:10px;
border-bottom:2px solid transparent;
}
a:hover {
border-bottom:2px solid #000;
}
/* 垂直菜單 */
ul {
list-style:none;
margin:0;
padding:0;
width:200px;
}
li {
margin-bottom:10px;
}
a {
text-decoration:none;
color:#000;
padding:10px;
display:block;
border:1px solid #000;
}
a:hover {
color:#fff;
background-color:#000;
}
/* 折疊菜單 */
ul {
list-style:none;
margin:0;
padding:0;
}
li {
margin-bottom:10px;
}
a {
text-decoration:none;
color:#000;
padding:10px;
display:block;
border:1px solid #000;
}
a:hover {
color:#fff;
background-color:#000;
}
ul ul {
display:none;
}
li:hover >ul {
display:block;
}
/* Mega菜單 */
ul {
list-style:none;
margin:0;
padding:0;
display:flex;
}
li {
margin-right:20px;
position:relative;
}
a {
text-decoration:none;
color:#000;
padding:10px;
}
a:hover {
color:#fff;
background-color:#000;
}
ul ul {
position:absolute;
left:0;
top:100%;
background-color:#fff;
border:1px solid #000;
display:none;
min-width:200px;
}
li:hover >ul {
display:block;
}
/* 帶箭頭下拉菜單 */
ul {
list-style:none;
margin:0;
padding:0;
}
li {
margin-right:20px;
position:relative;
}
a {
text-decoration:none;
color:#000;
padding:10px;
display:flex;
align-items:center;
}
a:hover {
color:#fff;
background-color:#000;
}
ul ul {
position:absolute;
left:0;
top:100%;
background-color:#fff;
border:1px solid #000;
display:none;
min-width:200px;
}
li:hover >ul {
display:block;
}
li:before {
content:'';
position:absolute;
right:10px;
top:50%;
margin-top:-5px;
border:5px solid transparent;
border-top-color:#000;
}

以上是一些常用的CSS菜單樣式，可以根據需要進行修改，并結合JavaScript實現更復雜的效果。