經典的 div + css 滑鼠 hover 下拉選單
阿新 • • 發佈：2018-11-04
經典的 div + css 滑鼠 hover 下拉選單
效果圖：
原始碼：
<html> <head> <meta charset="utf-8"> <style type="text/css"> nav { margin:100px auto; text-align:center; } nav ul { border-radius:10px; background:linear-gradient(to bottom,#efefef,#bbbbbb); padding:0 20px; display:inline-table; position:relative; box-shadow:1px 1px 3px #666; list-style:none; } nav ul ul { display:none; list-style:none; } nav ul li { float:left; list-style:none; } nav ul::after { content:""; display:block; clear:both; list-style:none; } nav ul li a { display:block; padding:25px 40px; color:#000; text-decoration:none; font-family:"微軟雅黑"; } nav ul li:hover > ul { display:block; list-style:none; } nav ul li:hover { background:linear-gradient(to bottom,#4f5964,#5f6975); list-style:none; } nav ul li:hover a { color:#FFF; } nav ul ul { background:#5f6975; border-radius:0; position:absolute; top:100%; padding:0; list-style:none; } nav ul ul li { float:none; border-top:1px solid #6b727c; border-bottom:1px solid #575f6a; list-style:none; } nav ul ul li a { color:#FFF; } nav ul ul li a:hover { background:#4b545f; } nav ul ul ul { width:100%; position:absolute; left:100%; top:50%; list-style:none; } </style> </head> <body> <nav> <ul> <li><a href="#">導航一</a> <ul> <li><a href="#">二級導航</a></li> <li><a href="#">二級導航</a></li> <li><a href="#">二級導航</a></li> <li><a href="#">二級導航</a></li> </ul> </li> <li><a href="#">導航二</a></li> <li><a href="#">導航三</a> <ul> <li><a href="#">二級導航</a></li> <li><a href="#">二級導航</a></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></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> </ul> </li> <li><a href="#">導航六</a></li> </ul> </nav> </body> </html>