CSS彈出式菜單是網(wǎng)頁設(shè)計(jì)中常用的一種交互方式。下面是一個(gè)使用CSS實(shí)現(xiàn)的簡單的彈出式菜單代碼示例:

/*菜單樣式*/
.menu {
display: none; /*默認(rèn)不顯示*/
position: absolute; /*絕對(duì)定位*/
z-index: 1; /*設(shè)置層級(jí)*/
background-color: #f1f1f1; /*背景色*/
min-width: 120px; /*最小寬度*/
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /*投影效果*/
}
/*菜單項(xiàng)樣式*/
.menu a {
color: black; /*字體顏色*/
padding: 12px 16px; /*內(nèi)邊距*/
text-decoration: none; /*去除下劃線*/
display: block; /*塊級(jí)元素*/
}
/*鼠標(biāo)懸停在菜單項(xiàng)上的樣式*/
.menu a:hover {
background-color: #ddd; /*背景色*/
}
/*鼠標(biāo)懸停在菜單容器上時(shí)，顯示菜單*/
.container:hover .menu {
display: block;
}
/*容器樣式*/
.container {
display: inline-block; /*內(nèi)聯(lián)塊級(jí)元素*/
position: relative; /*相對(duì)定位*/
}
/*箭頭樣式*/
.arrow {
border: solid black; 
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
transform: rotate(45deg); /*旋轉(zhuǎn)45度*/
position: absolute; /*絕對(duì)定位*/
right: 10px; /*距離右邊框10px*/
top: 50%; /*垂直居中*/
margin-top: -3px; /*向上移動(dòng)3px*/
}

以上是一個(gè)基本的彈出式菜單代碼實(shí)現(xiàn)，通過鼠標(biāo)懸停在目標(biāo)元素容器上，讓菜單顯示出來。希望對(duì)大家有幫助。