初級菜鳥的作品，各位大佬見笑了 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
初級菜鳥的作品，各位大佬見笑了 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> *{ margin:0; padding:0; } ul,ol,li{ list-style:none; } a{ text-decoration: none; }
/*給a去掉下劃線*/ .nav{ width: 606px; height: 40px; background: #ccc; margin: 100px auto; } div{ width: 100%; height: 40px; /* 試圖給ul加上一個整體div，使得看起來更舒服點=。= */ background: darkgrey; }
.nav li{ float: left; position: relative; } .nav li a{ display: block; width: 100px; height: 40px; background-color:darkgrey; border-right:1px solid #fff; text-align: center; line-height: 40px; font-size: 20px; color: white; } .nav li a:hover{ background: darkgrey; color: black; text-decoration: underline; } .nav li .nav2{ position:absolute; display:none;/*初始狀態二級導航隱藏*/ }
.nav li:hover .nav2{ display: block; } </style> <body> <div id="header"> <ul class="nav"> <li> <a href="#" target="_blank">網站首頁</a> </li> <li> <a href="#" target="_blank">公司簡介</a> </li> <li> <a href="#" target="_blank">產品類型</a> <ul class="nav2"> <li> <a href="#">產品1</a> </li> <li> <a href="#">產品2</a> </li> <li> <a href="#">產品3</a> </li> <li> <a href="#">產品4</a> </li> </ul> </li> <li> <a href="#" target="_blank">新聞中心</a> </li> <li> <a href="#" target="_blank">線上招聘</a> <ul class="nav2"> <li> <a href="#">校園招聘</a> </li> <li> <a href="#">實習生招聘</a> </li> <li> <a href="#">社會招聘</a> </li> </ul> </li> <li> <a href="#" target="_blank">聯繫我們</a> <ul class="nav2"> <li> <a href="#">客服1</a> </li> <li> <a href="#">客服2</a> </li> <li> <a href="#">客服3</a> </li> <li> <a href="#">客服4</a> </li> </ul> </li> </ul> </div> </body> </html>
