CSS3是現代Web設計領域不可或缺的一部分，它提供了豐富的樣式和動畫效果，其中菜單效果是一個常見的應用場景。下面我們來介紹一些常見的CSS3菜單效果：

/* 圓形菜單 */
.circle-menu{
position: fixed;
right: 20px;
bottom: 20px;
width: 50px;
height: 50px;
background-color: #f00;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
z-index: 999;
transition: all 0.3s ease-in-out;
}
.circle-menu:hover{
width: 200px;
height: 200px;
}
.circle-menu a{
display: block;
width: 30px;
height: 30px;
background-color: #fff;
border-radius: 50%;
margin: 10px;
text-align: center;
line-height: 30px;
color: #666;
font-size: 12px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
/* 水平菜單 */
.horizontal-menu{
display: flex;
justify-content: center;
align-items: center;
height: 50px;
background-color: #333;
}
.horizontal-menu a{
display: inline-block;
padding: 10px 15px;
color: #fff;
text-decoration: none;
font-size: 16px;
transition: all 0.3s ease-in-out;
}
.horizontal-menu a:hover{
background-color: #f00;
}
/* 垂直菜單 */
.vertical-menu{
display: flex;
flex-direction: column;
height: 100%;
}
.vertical-menu a{
display: block;
padding: 10px;
color: #fff;
text-decoration: none;
font-size: 16px;
background-color: #333;
transition: all 0.3s ease-in-out;
}
.vertical-menu a:hover{
background-color: #f00;
}

以上代碼實現了圓形菜單、水平菜單和垂直菜單三種效果，可以根據自己的需求進行相關修改，增強頁面的交互體驗。