CSS氣泡菜單是一個非常實用的網頁導航菜單，它通常出現在網頁的頂部或側邊欄，可以幫助用戶快速地找到自己需要的內容或功能。下面我們來介紹一下如何使用CSS來實現氣泡菜單。

代碼示例：
.menu {
position: relative;
}
.menu ul {
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
display: inline-block;
position: relative;
}
.menu li a {
display: block;
padding: 10px 15px;
background-color: #ccc;
color: #333;
text-decoration: none;
}
.menu li:hover a {
background-color: #333;
color: #fff;
}
.menu li:hover .bubble {
display: block;
}
.bubble {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 999;
width: 200px;
padding: 10px;
background-color: #333;
color: #fff;
border-radius: 3px;
}
.bubble:before {
content: "";
display: block;
position: absolute;
top: -10px;
left: 20px;
border: 10px solid transparent;
border-bottom: 10px solid #333;
}

如上代碼所示，首先我們需要一個容器，可以用一個div來實現。對于容器的定位，我們使用相對定位（relative），因為我們下面會使用絕對定位（absolute）來定位氣泡菜單。然后我們將ul的列表樣式設置為none，這樣我們的菜單就不會有點形式。接下來，我們將每一個li元素設為inline-block，這樣它們就可以一行顯示，并且每一個li元素都擁有一個相對定位。我們給每個a元素設置了一個背景顏色、padding等基本樣式，并去掉了a標簽原本的下劃線。當鼠標懸停時，a元素的顏色和背景色都發生了改變。而這里的重點是在于鼠標懸停時相應元素的子元素.bubble的顯示設置變成了block，而我們在.bubble樣式中所設置的樣式效果就會被應用到.bubble上。.bubble元素是一個絕對定位，并且會從它的父元素（也就是li元素）下面的位置向上彈出來。我們使用了before偽元素來模擬氣泡的樣式。