css ul li實現縱向導航選單效果
阿新 • • 發佈：2018-12-12
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .nav>li { float: left; } .nav{ list-style: none; } .drop-down-content{ list-style: none; } .nav a{ display: block; text-decoration: none; width: 100px; height: 50px; text-align: center; line-height: 50px; color: white; background-color: gainsboro; } .drop-down-content a { display: block; text-decoration: none; width: 100px; height: 50px; text-align: center; line-height: 50px; color: white; background-color: gainsboro; } .nav>li:first-child a { border-radius: 0px 0 0 0px; } .nav>li:last-child a { border-radius: 0 0px 0px 0; } .drop-down { position: relative; } .drop-down-content { display: none; padding: 0; position: absolute; z-index: 9999; } .banner { clear: both; } .drop-down-content li:hover a { background-color: red; } .nav .drop-down:hover .drop-down-content { display: block; left: 0; } </style> </head> <body> <ul class="nav"> <li class="drop-down"> <a href="#">主選單一</a> <ul class="drop-down-content"> <li> <a href="#">1</a> </li> <li> <a href="#">2</a> </li> <li> <a href="#">3</a> </li> </ul> </li> <li class="drop-down"> <a href="#">主選單二</a> <ul class="drop-down-content"> <li> <a href="#">11</a> </li> <li> <a href="#">22</a> </li> <li> <a href="#">33</a> </li> </ul> </li> <li> <a href="#">主選單三</a> </li> <li> <a href="#">主選單四</a> </li> <li> <a href="#">主選單五</a> </li> </ul> <div style="width: 200px;height: 300px;border: 1px saddlebrown"></div> </body> </html>