色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css制作二級導(dǎo)航

林玟書2年前12瀏覽0評論

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è)置了鼠標懸停時的背景色,讓用戶可以明顯地看出當前懸停的鏈接。