CSS鼠標(biāo)放上去菜單欄是Web開發(fā)中常用的交互式組件。通過CSS實(shí)現(xiàn)鼠標(biāo)懸浮在菜單項(xiàng)上時(shí)顯示其它相關(guān)的菜單項(xiàng)，方便用戶快速選擇所需的功能。

.menu{
margin: 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
}
.menu li{
display: inline-block;
position: relative;
line-height: 50px;
padding: 0 20px;
cursor: pointer;
}
.sub-menu{
display: none;
position: absolute;
left: 0;
top: 50px;
background-color: #fff;
border: 1px solid #ccc;
}
.menu li:hover .sub-menu{
display: block;
}
.sub-menu li{
display: block;
line-height: 30px;
}

以上是一個(gè)簡(jiǎn)單的CSS代碼實(shí)現(xiàn)一個(gè)鼠標(biāo)放上去菜單欄的例子。menu是菜單項(xiàng)所在的容器，其樣式設(shè)置為無序列表（list-style: none）并有一個(gè)灰色背景（background-color: #f2f2f2）。每個(gè)菜單項(xiàng)使用li標(biāo)簽，其樣式設(shè)置為行內(nèi)塊元素并相對(duì)定位（position: relative），鼠標(biāo)指針在上面時(shí)變?yōu)槭中危╟ursor: pointer），在每個(gè)菜單項(xiàng)的下面，放置一個(gè)帶有子菜單項(xiàng)的div元素，用于在鼠標(biāo)放上去時(shí)顯示子菜單項(xiàng)。

.sub-menu的樣式設(shè)置為絕對(duì)定位，并且在頂部距離其父菜單項(xiàng)的下面50像素。這意味著當(dāng)用戶鼠標(biāo)放上去時(shí)，子菜單項(xiàng)會(huì)顯示其父菜單項(xiàng)的下面并懸浮在頁面上方。子菜單項(xiàng)的樣式設(shè)置為塊級(jí)元素并具有行高30像素。

在CSS中，使用:hover偽類選擇器指定當(dāng)鼠標(biāo)懸浮在某個(gè)元素上時(shí)要應(yīng)用的樣式。在這個(gè)例子中，當(dāng)鼠標(biāo)懸浮在菜單項(xiàng)li上時(shí)，響應(yīng)其子菜單項(xiàng)的顯示（display: block）。這意味著子菜單項(xiàng)將顯示在用戶鼠標(biāo)下方的菜單項(xiàng)下面。