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

二級下拉導航欄css

錢多多2年前10瀏覽0評論

二級下拉導航欄是網頁設計中常見的一種導航欄形式,它可以讓用戶更方便地瀏覽網站的不同欄目和頁面。在 CSS 中實現二級下拉導航欄,需要使用<ul><li>標簽,以及 CSS 中的絕對定位和顯示/隱藏屬性。

.navbar {
position: relative;
background-color: #333;
height: 40px;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.navbar li {
display: inline-block;
padding: 10px;
color: #fff;
}
.navbar li:hover {
background-color: #555;
}
.navbar li ul {
display: none;
position: absolute;
left: 0;
top: 40px;
background-color: #555;
}
.navbar li:hover ul {
display: block;
}
.navbar li ul li {
display: block;
padding: 5px;
color: #fff;
}

以上代碼中,.navbar是導航欄的樣式類名,<ul><li>分別表示列表和列表項。導航欄使用相對定位,而下拉菜單使用絕對定位,使其固定在導航欄下方。初始狀態下,下拉菜單的display屬性為none,表示隱藏。當鼠標移動到導航欄某個列表項上時,對應的下拉菜單<ul>display屬性變為block,表示顯示。

通過以上代碼,我們可以實現一個簡單的二級下拉導航欄,可以根據需要進行進一步的樣式調整和優化。