這應(yīng)該是這幾天以來看到的最簡單易懂的有二級菜單欄的導(dǎo)航欄效果實現(xiàn)了
使用html+css實現(xiàn)，看了好幾天導(dǎo)航欄的實現(xiàn)方式，要么是太復(fù)雜的需要JS或者框架的，要么是太簡單僅僅使用div和超鏈接的，
再要么就是只有簡單的一級導(dǎo)航，沒有二級菜單欄的，心情復(fù)雜
就想找一個有二級菜單欄，使用html+css實現(xiàn)，使用無序列表ul+浮動實現(xiàn)的，今天總算是找到了，趕緊拿來練練手
代碼是很簡單，感覺可以當(dāng)做模版來做，之后記錄一下樣式的設(shè)置，稍加修改就好了
話不多說，直接上代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; } a{ text-decoration: none; } li{ list-style: none; } .nav{ width: 600px; height: 40px; background-color: black; margin: 40px auto 0; } .nav li{ float: left; margin-right: 10px; margin-left: 10px; position: relative; } .nav li a{ display: block; height: 40px; width: 100px; text-align: center; background-color: #c1727f; line-height: 40px; color: #fff; } .nav li .nav2{ display: none; left: -10px; } .nav li .nav2 li a{ background-color: orange; } .nav li .nav2 li a:hover{ background-color: #c1727f; } .nav li a:hover{ background-color: lightcoral; } .nav li:hover .nav2{ display: block; position: absolute; } .banner{ width: 800px; height: 350px; margin: 0 auto; background: yellow; line-height: 350px; text-align: center; font-size: 30px; } </style> </head> <body> <ul class="nav"> <li> <a href="#">產(chǎn)品中心</a> <ul class="nav2"> <li><a href="#">產(chǎn)品1</a></li> <li><a href="#">產(chǎn)品2</a></li> <li><a href="#">產(chǎn)品3</a></li> </ul> </li> <li> <a href="#">游戲中心</a> <ul class="nav2"> <li><a href="#">產(chǎn)品1</a></li> <li><a href="#">產(chǎn)品1</a></li> <li><a href="#">產(chǎn)品1</a></li> </ul> </li> <li> <a href="#">電影中心</a> <ul class="nav2"> <li><a href="#">產(chǎn)品1</a></li> <li><a href="#">產(chǎn)品1</a></li> <li><a href="#">產(chǎn)品1</a></li> </ul> </li> <li> <a href="#">娛樂中心</a> <ul class="nav2"> <li><a href="#">產(chǎn)品1</a></li> <li><a href="#">產(chǎn)品1</a></li> <li><a href="#">產(chǎn)品1</a></li> </ul> </li> <li> <a href="#">教育中心</a> <ul class="nav2"> <li><a href="#">產(chǎn)品1</a></li> <li><a href="#">產(chǎn)品1</a></li> <li><a href="#">產(chǎn)品1</a></li> </ul> </li> </ul> <div class="banner"> 輪播圖 </div> </body> </html>
稍加解釋：無序列表嵌套實現(xiàn)二級菜單，樣式設(shè)置定位，把握好寬高及邊距即可
效果圖如下：
文章來源：http://www.zghlxwxcb.cn/news/detail-463390.html
?完畢。文章來源地址http://www.zghlxwxcb.cn/news/detail-463390.html
到了這里，關(guān)于html+css實現(xiàn)二級導(dǎo)航欄效果，簡單易看懂噢！的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
