<!DOCTYPE html> <html> <head> <title>三級菜單</title> <meta charset="utf-8" /> <style type="text/css"> /*添加視覺樣式*/ .multi_drop_menu {font:1em helvetica, arial, sans-serif;} .multi_drop_menu a { display: block; color: #555; background-color: #eee; padding: 0.2em 1em; border-width: 3px; border-color: transparent; } .multi_drop_menu a:hover {color:#fff;background-color:#aaa;} .multi_drop_menu a:active {background:#fff;color:#ccc;} /*添加功能樣式*/ .multi_drop_menu * {margin:0; padding:0;} /*強制 ul 包圍 li*/ .multi_drop_menu ul {float:left;} .multi_drop_menu li {/*水平排列菜單項*/float:left;/*去掉默認的項目符號*/list-style-type:none;/*為子菜單提供定位上下文*/position:relative;} .multi_drop_menu li a {/*給每個鏈接添加一個右邊框*/border-right-style:solid;/*背景只出現在內邊距區域后面*/background-clip:padding-box;/*去掉鏈接的下划線*/text-decoration:none;} .multi_drop_menu li:last-child a {border-right-style:none;} /* 添加的視覺樣式 */ /*二級菜單寬度*/ .multi_drop_menu li ul {width:8em;} .multi_drop_menu li li a {/*去掉繼承的右邊框*/border-right-style:none;/*添加上邊框*/border-top-style:solid;} /* 添加的功能樣式 */ .multi_drop_menu li ul {display:none;/*相對於父菜單項定位*/position:absolute;/*左邊與父菜單項對齊*/left:0;/*頂邊與父菜單項底邊對齊*/top:100%;} .multi_drop_menu li li {/*停止浮動，恢復堆疊*/float:none;} .multi_drop_menu li li ul {/*繼續隱藏三級下拉菜單*/display:none;} .multi_drop_menu li:hover > ul {/*父元素懸停時顯示*/display:block;} .multi_drop_menu li li ul {/*相對於父菜單定位*/position:absolute;/*與父菜單右側對齊*/left:100%;/*與父菜單項頂邊對齊*/top:0;} /* 垂直列表 */ .multi_drop_menu.vertical {width:8em;} .multi_drop_menu.vertical li a {border-right-style:none;border-top-style:solid;} .multi_drop_menu.vertical li li a {border-left-style:solid;} .multi_drop_menu.vertical ul,.multi_drop_menu.vertical li {/* 讓頂級菜單垂直顯示*/float:none;} .multi_drop_menu.vertical li ul {/*子菜單左邊與上一級菜單右邊對齊*/left:100%;/*子菜單頂邊與上一級菜單項頂邊對齊*/top:0;} .multi_drop_menu li:hover > a {/*懸停時的文本顏色*/color:#fff;/*懸停時的背景顏色*/background-color:#aaa} </style> </head> <body> <nav class="multi_drop_menu vertical"> <!-- 一級開始 --> <ul> <li><a href="#">首頁</a> <!-- 二級開始 --> <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> <!-- 三級開始 --> <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> <!-- 三級開始 --> <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> </ul> <!-- 二級結束 --> </li> <li><a href="#">第一</a></li> <li><a href="#">第一</a></li> <li><a href="#">第一</a></li> </ul> <!-- 一級結束 --> </nav> </body> </html>