CSS導(dǎo)航欄是網(wǎng)頁(yè)設(shè)計(jì)中常見的元素之一，而當(dāng)需要使用子菜單時(shí)，常常需要讓導(dǎo)航欄停留在子菜單上方，以方便用戶操作。下面我們將介紹如何實(shí)現(xiàn)CSS導(dǎo)航欄停留在子菜單上方的方法。

.nav {
position: relative;
}
.sub-nav {
position: absolute;
top: 100%;
left: 0;
display: none;
}
.nav:hover .sub-nav {
display: block;
z-index: 100;
}

首先，我們給導(dǎo)航欄設(shè)置一個(gè)相對(duì)定位的父級(jí)元素，這樣才能讓子菜單使用絕對(duì)定位相對(duì)于導(dǎo)航欄進(jìn)行定位。

接著，我們對(duì)子菜單使用絕對(duì)定位，并將其位置設(shè)置在導(dǎo)航欄下方。同時(shí)，我們將子菜單的display屬性設(shè)置為none，也就是默認(rèn)不顯示。

最后，我們使用:hover偽類來(lái)監(jiān)聽導(dǎo)航欄的鼠標(biāo)懸停事件，當(dāng)用戶鼠標(biāo)懸停在導(dǎo)航欄上時(shí)，顯示子菜單。為了保證子菜單能夠覆蓋其他元素，我們還需要將其z-index屬性設(shè)置為一個(gè)比較大的值。

以上就是實(shí)現(xiàn)CSS導(dǎo)航欄停留在子菜單上方的方法，希望對(duì)大家有所幫助。