CSS中的鼠標經過事件一直是網頁設計中必不可少的一部分。其中最常用的就是鼠標經過時彈出導航菜單的效果。

為了實現這一效果，我們需要使用CSS中的偽類選擇器：hover。在HTML中，我們需要用到ul和li標簽來創建導航列表。我們可以將ul和li標簽放在一個div容器中。

<div class="nav">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">關于我們</a></li>
<li><a href="#">產品服務</a></li>
<li><a href="#">聯系我們</a></li>
</ul>
</div>

接下來，我們需要使用CSS來設置鼠標經過時彈出導航的效果。我們可以通過設置ul標簽的display屬性為none來實現這一效果，并使用:hover偽類選擇器來讓導航菜單在鼠標經過時出現。

.nav ul {
list-style:none;
display:none;
}
.nav:hover ul {
display:block;
}

現在，當鼠標經過導航菜單時，導航列表就會出現。我們還可以添加一些CSS效果，如懸停顏色等等。通過設置li標簽的樣式，我們可以創建一個漂亮的導航菜單。

.nav ul li {
float:left;
margin:0 20px;
}
.nav ul li a {
text-decoration:none;
color:#333;
font-weight:bold;
}
.nav ul li a:hover {
color:#ff0000;
}

至此，我們已經成功地創建了一個有鼠標經過彈出導航菜單效果的網頁導航。