CSS表格二級導航是網站中常用的一種菜單樣式,它能夠實現一個較為復雜的菜單結構,并且比較美觀。本文介紹如何通過CSS樣式來實現表格二級導航。
首先,在HTML中使用表格來構造導航菜單,一級菜單使用行來表示,二級菜單使用列來表示,如下所示。
<table> <tr> <td><a href="#">首頁</a></td> <td><a href="#">產品中心</a> <ul> <li><a href="#">產品1</a></li> <li><a href="#">產品2</a></li> <li><a href="#">產品3</a></li> </ul> </td> <td><a href="#">關于我們</a> <ul> <li><a href="#">公司簡介</a></li> <li><a href="#">團隊介紹</a></li> </ul> </td> <td><a href="#">聯系我們</a></td> </tr> </table>
接下來就是使用CSS樣式來美化表格二級導航了。
/* 移除一級菜單的默認樣式 */ table { border-collapse: collapse; } table td { text-align: center; padding: 10px; font-weight: bold; } table td a { text-decoration: none; color: #333; } /* 二級菜單的樣式 */ ul { list-style: none; background-color: #fff; border: 1px solid #ddd; position: absolute; display: none; } ul li { display: inline-block; margin: 0; padding: 5px 10px; } table td:hover ul { display: block; }
以上代碼中的實現方式是通過添加一個:hover屬性,鼠標懸浮在一級菜單上時,才展示出來二級菜單。
這樣,通過CSS樣式實現表格二級導航的效果就完成了。接下來可以根據自己的需求進行調整,如改變字體顏色、背景顏色等等。