CSS制作二級導(dǎo)航是網(wǎng)頁設(shè)計中常見的一種布局方式。與一級導(dǎo)航相比,二級導(dǎo)航在頁面上可以展示更多的內(nèi)容,并且更加方便用戶瀏覽。
nav{ width: 100%; margin: 0 auto; background-color: #f2f2f2; } .nav-link{ display: inline-block; padding: 10px; text-decoration: none; color: #333; } .subnav{ display: none; background-color: #fff; position: absolute; top: 40px; left: 0; width: 100%; z-index: 1; } .nav-link:hover .subnav{ display: block; } .subnav-link{ display: block; padding: 10px; text-decoration: none; color: #333; font-size: 14px; } .subnav-link:hover{ background-color: #f2f2f2; }
開頭我們先定義一個nav標簽,給它添加了一些基本的樣式,例如背景顏色和居中顯示。接下來,我們定義了一個.nav-link樣式,用來表示一級導(dǎo)航中的鏈接。我們將鏈接設(shè)為行內(nèi)塊級元素,并加上一些padding和字體樣式的設(shè)置。
然后是.subnav樣式,我們將它設(shè)置為absolute定位,絕對定位在.nav-link下方,并設(shè)置好寬度和z-index,讓它可以遮擋住下方的其他內(nèi)容。我們默認將其display屬性設(shè)為none,讓它一開始不顯示。
接下來,我們使用:hover偽類,當鼠標懸停在.nav-link上時,顯示該鏈接下的.subnav列表。在.subnav中,我們定義了.subnav-link樣式,用來表示二級導(dǎo)航中的鏈接,和一級導(dǎo)航樣式類似,樣式中定義了一些padding和字體樣式。
最后,在.subnav-link:hover中,我們設(shè)置了鼠標懸停時的背景色,讓用戶可以明顯地看出當前懸停的鏈接。
上一篇seller.vue