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

css做二級導航

謝彥文2年前8瀏覽0評論

CSS是一種被廣泛應用于前端開發工作中的語言,它可以用于美化HTML網頁的布局與樣式。其中,二級導航是網站中比較常見的一種特殊布局。接下來,我們來看看如何使用CSS來制作一個簡單的二級導航。

.nav {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f7f7f7;
padding: 10px;
}
.nav ul {
display: flex;
list-style: none;
margin: 0;
}
.nav ul li {
margin-right: 20px;
}
.nav ul li a {
color: #333;
text-decoration: none;
}
.nav ul li:hover a {
color: #f00;
}
.sub-nav {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #f7f7f7;
}
.sub-nav ul {
list-style: none;
margin: 0;
padding: 10px;
}
.sub-nav ul li {
margin-right: 0;
}
.sub-nav ul li a:hover {
color: #f00;
}
.nav ul li:hover .sub-nav {
display: block;
}

以上代碼中,我們通過設置.nav元素為display:flex來使其內部的元素橫向排列,通過設置.nav ul的樣式使其內部的li元素橫向排列。接下來,我們通過設置.sub-nav的position為absolute并設置top為100%來使其在父元素下方。最后,我們給.nav ul li:hover .sub-nav這個選擇器添加display:block的樣式,讓鼠標懸停在一級導航上時,相應的二級導航會出現。