提示：您可以先修改部分代碼再運行
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>分類菜單</title> <style type="text/css"> * { margin: 0; padding: 0; } body { font:14px/1.5 "宋體"; } a { text-decoration: none; } a:hover { color: red; } ul { position: relative; margin: 50px 0 0 50px; width: 300px; border: 2px solid #aa9900; } li { height: 30px; line-height: 30px; width: 100%; text-indent: 1em; list-style: none; border-top: 1px solid #CCC; } li:hover, li:hover + li, li:first-child { border-top: none; height: 31px; line-height: 31px; } div.box { width: 300px; height: calc(100% + 2px); display: none; left: 300px; top: -2px; border: 1px solid #999; position: absolute; z-index: 1; background: #EEE; } div.item { position: relative; width: 100%; height: 100%; } li:hover div.box { display: block; } li div.item span.link { display: block; width: calc(100% - 1px); height: calc(100% - 2px); position: absolute; left: 0; top: 0; border-style: solid; border-color: #FFF; border-width: 1px 0 1px 1px; z-index: 2; } li:hover div.item span.link { border-color: #999; background: #EEE; width: 100%; } span.icon { position: absolute; right: 10px; top: 0; color: #999; font-weight: bold; font-family: serif; } li:hover a { color: #270; } </style> </head> <body> <ul> <li> <div class="item"> <span class="link"> 分類1 </span> <span class="icon">></span> </div> <div class="box">分類1 詳細資料</div> </li> <li> <div class="item"> <span class="link"> 分類2 </span> <span class="icon">></span> </div> <div class="box">分類2 詳細資料</div> </li> <li> <div class="item"> <span class="link"> 分類3 </span> <span class="icon">></span> </div> <div class="box">分類3 詳細資料</div> </li> <li> <div class="item"> <span class="link"> 分類4 </span> <span class="icon">></span> </div> <div class="box">分類4 詳細資料</div> </li> <li> <div class="item"> <span class="link"> 分類5 </span> <span class="icon">></span> </div> <div class="box">分類5 詳細資料</div> </li> <li> <div class="item"> <span class="link"> 分類6 </span> <span class="icon">></span> </div> <div class="box">分類6 詳細資料</div> </li> <li> <div class="item"> <span class="link"> 分類7 </span> <span class="icon">></span> </div> <div class="box">分類7 詳細資料</div> </li> <li> <div class="item"> <span class="link"> 分類8 </span> <span class="icon">></span> </div> <div class="box">分類8 詳細資料</div> </li> <li> <div class="item"> <span class="link"> 分類9 </span> <span class="icon">></span> </div> <div class="box">分類9 詳細資料</div> </li> </ul> </body></html></td> </tr></table>
提示：您可以先修改部分代碼再運行
