CSS是前端開發(fā)中不可或缺的技能,它可以實現(xiàn)各種不同的效果和功能。今天我們來討論一下如何只使用CSS做出一個漂亮的二級導(dǎo)航欄。
<ul class="menu"> <li> <a href="#">菜單1</a> <ul class="submenu"> <li><a href="#">子菜單1</a></li> <li><a href="#">子菜單2</a></li> <li><a href="#">子菜單3</a></li> </ul> </li> <li><a href="#">菜單2</a></li> <li><a href="#">菜單3</a></li> </ul>
首先,我們需要創(chuàng)建一個無序列表,類名為“menu”,其中包含多個列表項,每個列表項包含一個超鏈接菜單項和一個子菜單,類名為“submenu”。在CSS中,我們可以使用以下樣式對其進(jìn)行基本的樣式設(shè)置:
.menu { display: flex; justify-content: space-between; list-style: none; border-bottom: 1px solid #ccc; } .menu li { position: relative; margin: 0 10px; } .menu a { font-size: 14px; color: #333; text-decoration: none; } .submenu { display: none; position: absolute; top: 100%; left: 0; z-index: 1; background-color: #fff; width: 120px; border: 1px solid #ccc; } .submenu li { margin: 0; } .submenu a { display: block; padding: 10px; color: #333; text-decoration: none; } .menu li:hover >.submenu { display: block; }
解釋一下這些樣式的作用:
- 使用flex布局讓菜單項水平排列
- 給菜單項添加一些間距和相對定位,以便對子菜單設(shè)置絕對定位
- 設(shè)置超鏈接的基本樣式
- 給子菜單設(shè)置一些基本樣式,比如:不顯示、絕對定位、寬度、邊框、背景顏色等
- 當(dāng)鼠標(biāo)懸浮在菜單項上時,顯示子菜單
以上就是只使用CSS做二級導(dǎo)航欄的全部內(nèi)容,希望能對你有所幫助!