簡單實現三級導航欄
阿新 • • 發佈：2018-07-23
idt wid mar play png add div image red
簡單實現三級導航欄效果，如圖：
代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} li{ list-style: none; float: left; width: 100px; height: 30px; line-height:30px; text-align: center; border-right: 1px solid white; border-top: 1px solid white; } a{ width: 100px; height: 30px; text-decoration: none; display: block; color: black; } ul>li>a{background:red;} ul>li>a:hover{background:yellow;} ul>li>ul>li>ul{margin-top:-31px; margin-left:101px;} /*下面三行核心代碼*/ ul>li>ul{display: none;}/*次行代碼不僅作用與二級菜單還作用於三級菜單*/ ul>li:hover>ul{display: block;} ul>li>ul>li:hover>ul{display: block;} </style> </head> <body> <ul> <li><a href="#">新聞一</a> <ul> <li><a href="#">新聞二</a> <ul> <li><a href="#">新聞三</a></li> <li><a href="#">新聞三</a></li> <li><a href="#">新聞三</a></li> </ul> </li> <li><a href="#">新聞二</a> <ul> <li><a href="#">新聞三</a></li> <li><a href="#">新聞三</a></li> <li><a href="#">新聞三</a></li> </ul> </li> <li><a href="#">新聞二</a> <ul> <li><a href="#">新聞三</a></li> <li><a href="#">新聞三</a></li> <li><a href="#">新聞三</a></li> </ul> </li> <li><a href="#">新聞二</a> <ul> <li><a href="#">新聞三</a></li> <li><a href="#">新聞三</a></li> <li><a href="#">新聞三</a></li> </ul> </li> </ul> </li> <li><a href="#">新聞一</a></li> <li><a href="#">新聞一</a></li> <li><a href="#">新聞一</a></li> </ul> </body> </html>
要想實現每級菜單的指針懸停顏色變化不同，在css樣式中添加如下代碼：
ul>li>ul>li>a{background:blue;}
ul>li>ul>li>ul>li>a{background:#eeeeee;}
ul>li>ul>li>a:hover{background:green;}
ul>li>ul>li>ul>li>a:hover{background:pink;}
簡單實現三級導航欄