css实现三级导航菜单
2023-07-27阅读：2517
演示效果：
代码：
<!DOCTYPE html>
<html>
<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>
<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>