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

css 懸浮二級菜單

黃文隆2年前12瀏覽0評論

CSS懸浮二級菜單是網站設計中常見的特效之一,它可以使網頁菜單看起來更加美觀、實用。下面是一個示例代碼,展示如何用CSS實現懸浮二級菜單效果:

/*菜單欄樣式*/
nav {
display: inline-block;
background-color: #F6F6F6;
border-bottom: 1px solid #DDD;
padding: 10px;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav li {
display: inline-block;
margin-right: 20px;
position: relative;
}
/*二級菜單樣式*/
nav ul ul {
display: none;
position: absolute;
top: 30px;
left: 0;
background-color: #FFF;
border: 1px solid #DDD;
padding: 10px;
}
nav ul li:hover >ul {
display: block;
}

在上面的代碼中,首先定義了整個菜單欄的樣式,其中包括背景顏色、邊框、內部填充等。然后,定義了一級菜單li元素的樣式,將其設為inline-block,使得它們可以橫向排列。

接著,定義了二級菜單的樣式,將其設為絕對定位,并且頂部與一級菜單底部相距30px。在一級菜單的hover狀態下,將二級菜單設為顯示狀態,從而實現懸浮二級菜單的效果。

總的來說,CSS懸浮二級菜單可以通過簡單的CSS樣式和一些JavaScript代碼來實現。設計者可以根據自己的需求對菜單欄樣式和二級菜單樣式進行調整,以達到最佳的視覺效果。