純css的導覽功能表

代碼如下

複製代碼

<style> .Nav { } .Nav li{         float:left;         display:block;         position:relative; } .Nav a{         float:left;         display:block;         position:relative;         padding:2px 10px 2px 10px;         font-size:13px;         text-decoration: none; } .Nav li a:hover {         color:#ffffff;         background:#ea0000; } .Nav li table {         display:none;         border-collapse:collapse; } .Nav li:hover table, .Nav a:hover table {         display:block;         position:absolute;         top:18px;         left:0;         background:#ea0000; } .Nav li:hover table a, .Nav a:hover table a {         float:none;         background:#f2f2f2;         color:#000;         width:120px;         border-bottom:1px solid #fff; } .Nav li:hover table a:hover, .Nav a:hover table a:hover {         background:#565656;         color:#fff; } </style> <div class='Nav'> <li>         <a href='#'>產品         <table><tr><td>                 <a href='#1'>內容管理系統</a>                 <a href='#2'>競爭情報系統</a>         </td></tr></table>         </a> </li> <li>         <a href='#'>客戶服務         <table><tr><td>                 <a href='#1'>支援人員</a>                 <a href='#2'>留言反饋</a>                 <a href='#3'>線上協助</a>         </td></tr></table>         </a> </li> </div>