CSS Menu · 前端開發

CSS Menu: ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> ul { /* 取消ul預設的內縮及樣式 */ margin: 0; padding: 0; list-style: none; } ul.drop-down-menu { border: #ccc 1px solid; display: inline-block; font-family: 'Open Sans', Arial, sans-serif; font-size: 13px; } ul.drop-down-menu li { position: relative; white-space: nowrap; border-right: #ccc 1px solid; } ul.drop-down-menu > li:last-child { border-right: none; } ul.drop-down-menu > li { float: left; /* 只有第一層是靠左對齊*/ } ul.drop-down-menu a { background-color: #fff; color: #333; display: block; padding: 0 30px; text-decoration: none; line-height: 40px; } ul.drop-down-menu a:hover { /* 滑鼠滑入按鈕變色*/ background-color: #ef5c28; color: #fff; } ul.drop-down-menu li:hover > a { /* 滑鼠移入次選單上層按鈕保持變色*/ background-color: #ef5c28; color: #fff;} ul.drop-down-menu ul { border: #ccc 1px solid; position: absolute; z-index: 99; left: -1px; top: 100%; min-width: 180px; } ul.drop-down-menu ul li { border-bottom: #ccc 1px solid; } ul.drop-down-menu ul li:last-child { border-bottom: none; } ul.drop-down-menu ul ul { /*第三層以後的選單出現位置與第二層不同*/ z-index: 999; top: -1px; left: 100%; } ul.drop-down-menu ul { /*隱藏次選單*/ display: none; } ul.drop-down-menu li:hover > ul { /* 滑鼠滑入展開次選單*/ display: block; } ul.drop-down-menu ul { /*隱藏次選單*/ left: 99999px; opacity: 0; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } ul.drop-down-menu li:hover > ul { /* 滑鼠滑入展開次選單*/ opacity: 1; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; left: -1px; border-right: 5px; } ul.drop-down-menu li:hover > ul ul { /* 滑鼠滑入之後、次選單之後的選單依舊隱藏*/ left: 99999px; } ul.drop-down-menu ul li:hover > ul { /* 第二層之後的選單展開位置*/ left: 100%; } </style> </head> <body> <ul class="drop-down-menu"> <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="#">Magento</a> </li> <li><a href="#">服務項目</a> <ul> <li><a href="#">系統整合</a> <ul> <li><a href="#">Magento與POS訂單系統整合</a> </li> <li><a href="#">Magento與CRM客戶管理系統整合</a> </li> <li><a href="#">Magento與ERP管理系統整合</a> </li> <li><a href="#">Magento金流串接服務</a> </li> </ul> </li> <li><a href="#">專業網頁設計</a> <ul> <li><a href="#">響應式網頁設計 (Responsive Web Design)</a> </li> <li><a href="#">手機網站設計</a> </li> <li><a href="#">WordPress 網頁設計</a> </li> </ul> </li> <li><a href="#">網路行銷服務</a> <ul> <li><a href="#">Amazon亞馬遜網路商城</a> </li> <li><a href="#">社群媒體行銷</a> </li> <li><a href="#">SEO 搜尋引擎優化</a> <ul> <li><a href="#">在地SEO</a> </li> <li><a href="#">SEO 搜尋引擎優化</a> </li> </ul> </li> </ul> </li> <li><a href="#">網站客製開發</a> </li> </ul> </li> <li><a href="#">專案介紹</a> </li> <li><a href="#">資訊分享</a> </li> <li><a href="#">聯絡我們</a> </li> </ul> </body> </html> ```