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

用css做一個二級菜單

劉柏宏2年前10瀏覽0評論

CSS是一種用于樣式標記的語言,可以輕松地實現(xiàn)各種樣式效果。其中,二級菜單是一個常見的Web設(shè)計功能,讓我們來看看如何使用CSS來實現(xiàn)。

/*一級菜單*/
nav ul{
list-style: none;
margin: 0;
padding: 0;
background: #5ca5e5; /*菜單背景*/
}
nav li{
float: left;
position: relative; /*相對定位,用于二級菜單的絕對定位*/
}
nav a{
display: block;
padding: 0 10px;
line-height: 40px;
color: #fff;
text-decoration: none;
}
nav ul ul{
display: none; /*將二級菜單默認隱藏*/
position: absolute; /*絕對定位*/
top: 100%; /*相對于父元素*/
}
nav ul li:hover >ul{
display: inherit; /*鼠標移到一級菜單時,顯示二級菜單*/
}
/*二級菜單*/
nav ul ul li{
float: none; /*二級菜單不必再懸浮*/
position: relative; /*為三級菜單絕對定位做準備*/
}
nav ul ul ul{
position: absolute;
left: 100%; /*相對于父元素*/
top: 0; /*相對于祖先元素*/
padding: 0; /*最外層li的padding會影響二級菜單*/
}
nav a:hover{ /*鼠標懸浮效果*/
background: #fff;
color: #000;
}

以上是實現(xiàn)二級菜單的基本CSS代碼。通過一些基本的樣式設(shè)置和偽類選擇器,我們可以為菜單欄生成二級菜單。其中,通過設(shè)置一級菜單的相對定位和二級菜單的絕對定位,使二級菜單可以根據(jù)一級菜單調(diào)整位置。此外,通過hover偽類選擇器,可以實現(xiàn)鼠標懸浮效果。