CSS 導航下拉選單
阿新 • • 發佈：2018-12-11
<!DOCTYPE html > <html> <head> <meta charset="utf-8"> <title>自學教程(如約智惠.com)</title> <style > ul { list-style-type:none; margin:0; padding:0; overflow:hidden; background-color:#333; } li { float:left; } li a, .dropbtn { display:inline-block; color:white; text-align:center; padding:14px 16px; text-decoration:none; } li a:hover, dropdown:hover .dropbtn { background-color:red; } li.dropdown { display:inline-block; } .dropdown-content { display:none; position:absolute; background-color:#f9f9f9; min-width:160px; bax-shadow:0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color:#f1f1f1; } .dropdown:hover .dropdown-content { display:block; } </style> </head> <body > <ul> <li><a class="active" href="#home">主頁</a></li> <li><a href="#news">新聞</a></li> <li class="dropdown"> <a href="#" class="dropbtn">下拉選單</a> <div class="dropdown-content"> <a href="#">連結 1</a> <a href="#">連結 2</a> <a href="#">連結 3</a> </div> </li> </ul> <h3>導航條插入下拉選單</h3> <p>滑鼠移動到"下拉選單"顯示列表</p> </body> </html>
