欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

css簡單的二級導(dǎo)航代碼

傅智翔2年前10瀏覽0評論

CSS簡單的二級導(dǎo)航代碼如下:

nav ul {
list-style: none;
padding: 0;
margin: 0;
background-color: #333;
}
nav li {
display: inline-block;
position: relative;
line-height: 21px;
text-align: center;
}
nav a {
display: block;
padding: 8px 15px;
color: #fff;
font-size: 16px;
text-decoration: none;
}
nav ul ul {
position: absolute;
top: 100%;
left: 0;
width: 200px;
display: none;
}
nav ul ul li {
display: block;
width: 100%;
}
nav ul ul a {
padding: 10px 15px;
color: #fff;
font-size: 14px;
text-decoration: none;
}
nav ul li:hover >ul {
display: inherit;
}
nav ul ul li:hover a {
background-color: #555;
}

以上代碼可以實現(xiàn)簡單的二級導(dǎo)航效果。通過設(shè)置nav ul為列表形式,使得導(dǎo)航欄呈現(xiàn)出多個選項。通過設(shè)置列表項的display屬性為inline-block,使得它們呈現(xiàn)在同一排。通過設(shè)置列表項的position屬性為relative和二級列表的position屬性為absolute,使得二級列表可以在父列表項上方顯示。通過設(shè)置列表項的hover事件和二級列表的display屬性為none/block,實現(xiàn)鼠標(biāo)移動到父列表項時顯示與隱藏二級列表。通過設(shè)置二級列表項的hover事件,實現(xiàn)鼠標(biāo)移動到二級列表項時改變背景顏色。