使用CSS實現下拉框是Web開發中常見的技巧之一。然而，當頁面中存在多個下拉框時，相互遮擋的問題就會出現。下面我們來看一下如何解決這個問題。

/* 首先定義下拉框的樣式 */
.select {
position: relative;
display: inline-block;
}
.select-options {
position: absolute;
top: 100%;
left: 0;
z-index: 999;
display: none;
}
/* 然后定義鼠標懸停時下拉框的顯示方式 */
.select:hover .select-options {
display: block;
}
/* 解決相互遮擋的問題，通過調整z-index屬性 */
.select:first-child .select-options {
z-index: 1;
}
.select:nth-child(2) .select-options {
z-index: 2;
}
.select:last-child .select-options {
z-index: 3;
}

在上面的代碼中，我們先定義了下拉框的基本樣式。然后通過:hover偽類實現鼠標懸停時下拉框的顯示方式。接著，我們用:first-child、:nth-child和:last-child偽類分別給每個下拉框的選項容器設置不同的z-index屬性，從而解決了相互遮擋的問題。

總之，使用CSS實現下拉框時，相互遮擋是一個常見的問題，但我們可以通過精細的樣式設計來解決這個問題。