簡單好用的二級導航
阿新 • • 發佈：2018-11-16
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>超簡潔CSS抽屜式下拉選單程式碼</title> <linkhref="css/lrtk.css" rel="stylesheet" type="text/css" /> </head> <body> <!-- 程式碼 開始 --> <h1>超簡潔CSS抽屜式下拉選單程式碼</h1> <nav class="nav"> <ul class="nav_menu"> <li class="nav_menu-item"><a href="http://www.lanrentuku.com/" target="_blank">Home</a></li> <li class="nav_menu-item"><a href="http://www.lanrentuku.com/" target="_blank">Services</a> <ul class="nav_submenu"> <li class="nav_submenu-item"> <a href="http://www.lanrentuku.com/" target="_blank">Web Design</a></li> <li class="nav_submenu-item"> <a href="http://www.lanrentuku.com/" target="_blank">Web Development</a></li> <li class="nav_submenu-item"> <a href="http://www.lanrentuku.com/" target="_blank">Web Hosting</a></li> </ul> </li> <li class="nav_menu-item"><a href="http://www.lanrentuku.com/" target="_blank">About</a> <ul class="nav_submenu"> <li class="nav_submenu-item"> <a href="http://www.lanrentuku.com/" target="_blank">Our Company</a></li> <li class="nav_submenu-item"> <a href="http://www.lanrentuku.com/" target="_blank">Our Xixi</a></li> <li class="nav_submenu-item"> <a href="http://www.lanrentuku.com/" target="_blank">Our Reach</a></li> </ul> </li> <li class="nav_menu-item"><a href="http://www.lanrentuku.com/" target="_blank">Blog</a></li> <li class="nav_menu-item"><a href="http://www.lanrentuku.com/" target="_blank">Contact</a></li> </ul> </nav> <!-- 程式碼 結束 --> </body> </html>
css
/* ÀÁÈËͼ¿â ËѼ¯ÕûÀí www.lanrentuku.com */ html { -moz-box-sizing: border-box; box-sizing: border-box; } a,a:hover{color:#FFF;text-decoration:none} *, *:before, *:after { -moz-box-sizing: border-box; box-sizing: border-box; } body { margin: 0; font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 1.5; background: #27ae60; } nav ul { list-style: none; padding-left: 0; margin-top: 0; margin-bottom: 0; } h1 { width: 500px; margin: 100px auto 20px; color: #f0f0f0; text-align: center; } .nav { width: 500px; margin: 0 auto; background: #1e8449; color: #f0f0f0; } .nav a { display: block; padding: 0 16px; line-height: inherit; cursor: pointer; } .nav_menu { line-height: 45px; font-weight: 700; text-transform: uppercase; } .nav_menu-item { display: inline-block; position: relative; } .nav_menu-item:hover { background-color: #9b59b6; } .nav_menu-item:hover .nav_submenu { display: block; } .nav_submenu { font-weight: 300; text-transform: none; display: none; position: absolute; width: 220px; background-color: #9b59b6; } .nav_submenu-item:hover { background: rgba(0, 0, 0, 0.1); }