<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>製作二級導覽功能表(縱向)</title> <style type="text/css"> #menu{ width: 100px; border: 1px solid #999; } #menu ul{ margin: 0px; padding: 0px; list-style: none;/* 隱藏預設列表符號*/ } #menu ul li{ background: #06C; height: 26px; line-height: 26px; /*行距*/ text-align: center; border-bottom: 1px solid #999; position: relative; } a{ display: block; font-size: 13px; color: #FFF; text-decoration: none;/*隱藏超廉價預設底線*/ } a:hover{ color:#F00; font-size: 14px; } #menu ul li ul{ display: none;/*預設隱藏*/ top:0px; width: 130px; border: 1px solid #ccc; border-bottom: none; position: absolute; left: 100px; } #menu ul li:hover ul{ display: block; } #menu ul li:hover ul li a{ display: block; } </style></head><body><div id="menu"> <ul> <li><a href="#">前端</a> <ul> <li><a href="#">HTML5</a></li> <li><a href="#">CSS</a></li> <li><a href="#">Javascript</a></li> <li><a href="#">Ajax</a></li> <li><a href="#">jQuery</a></li> </ul> </li> <li><a href="#">後台</a> <ul> <li><a href="#">Java</a></li> <li><a href="#">C++</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Python</a></li> <li><a href="#">C#</a></li> </ul> </li> <li><a href="#">行動裝置 App</a> <ul> <li><a href="#">Android</a></li> <li><a href="#">IOS</a></li> </ul> </li> <li><a href="#">資料庫</a> <ul> <li><a href="#">Oracle</a></li> <li><a href="#">MySql</a></li> <li><a href="#">SqlServer</a></li> <li><a href="#">MongoDB</a></li> <li><a href="#">DB2</a></li> </ul> </li> <li><a href="#">作業系統</a> <ul> <li><a href="#">Linux</a></li> <li><a href="#">Unix</a></li> <li><a href="#">Mac</a></li> <li><a href="#">Windows</a></li> </ul> </li> <li><a href=