CSS是一種被廣泛應(yīng)用于前端開發(fā)工作中的語言,它可以用于美化HTML網(wǎng)頁的布局與樣式。其中,二級導(dǎo)航是網(wǎng)站中比較常見的一種特殊布局。接下來,我們來看看如何使用CSS來制作一個(gè)簡單的二級導(dǎo)航。
.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; }
以上代碼中,我們通過設(shè)置.nav元素為display:flex來使其內(nèi)部的元素橫向排列,通過設(shè)置.nav ul的樣式使其內(nèi)部的li元素橫向排列。接下來,我們通過設(shè)置.sub-nav的position為absolute并設(shè)置top為100%來使其在父元素下方。最后,我們給.nav ul li:hover .sub-nav這個(gè)選擇器添加display:block的樣式,讓鼠標(biāo)懸停在一級導(dǎo)航上時(shí),相應(yīng)的二級導(dǎo)航會(huì)出現(xiàn)。