下拉列表是一個常見的網頁元素，它可以幫助用戶更直觀地查看和選擇需要的內容。這篇文章將介紹如何使用純CSS實現鼠標經過下拉列表。

<!-- HTML結構 -->
<div class="dropdown">
<a href="#" class="dropdown-toggle">下拉列表</a>
<ul class="dropdown-menu">
<li><a href="#">選項1</a></li>
<li><a href="#">選項2</a></li>
<li><a href="#">選項3</a></li>
</ul>
</div>

首先，需要隱藏下拉列表，并且鼠標經過時才顯示。可以使用CSS的:hover偽類實現這個效果。

.dropdown-menu {
display: none; /*隱藏下拉列表*/
}
.dropdown:hover .dropdown-menu {
display: block; /*鼠標經過時顯示*/
}

但是，這只是最簡單的下拉列表，我們需要更改樣式，讓它看起來更美觀。

/* 下拉列表樣式 */
.dropdown-menu {
position: absolute; /*相對定位*/
top: 100%; /*下拉列表在菜單下方*/
left: 0;
margin-top: 3px;
padding: 0;
background-color: #fff; /*背景顏色*/
border: 1px solid #ccc; /*邊框*/
border-radius: 4px;
box-shadow: 0 6px 12px rgba(0,0,0,.175);
z-index: 1000; /*顯示在最上層*/
}
.dropdown-menu li {
padding: 5px 10px;
cursor: pointer;
}
.dropdown-menu li:hover {
background-color: #f5f5f5; /*鼠標經過時的背景顏色*/
}
/* 下拉列表箭頭樣式 */
.dropdown-toggle::after {
display: inline-block;
margin-left: .3em;
vertical-align: .225em;
content: "";
border-top: .3em solid;
border-right: .3em solid transparent;
border-bottom: 0;
border-left: .3em solid transparent;
}
.dropdown:hover .dropdown-toggle::after {
border-top: 0;
border-bottom: .3em solid;
}

在最終效果中，下拉列表將在鼠標經過時顯示，并且箭頭也會變化。

這就是如何使用純CSS實現鼠標經過下拉列表的步驟。通過簡單的代碼，我們可以實現一個更美觀和易于使用的下拉列表。