CSS多級導航選單效果
分享一段程式碼例項,它實現了多級導航選單效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> .top-nav { font-size: 12px; font-weight: bold; list-style: none; } .top-nav li { float: left; list-style: none; margin-right: 1px; } .top-nav li a { line-height: 25px; text-decoration: none; background: #DDDDDD; color: #666666; display: block; width: 80px; text-align: center; } .top-nav li a:hover { background: #900; color: #FFF; } .top-nav ul { list-style: none; display: none; width: 80px; padding: 0; position: relative; } .top-nav li ul li ul { position: absolute; top: 0; left: 80px; } .top-nav li:hover ul { display: block; } .top-nav li:hover ul li ul { display: none; } .top-nav li ul li:hover ul { display: block; } </style> </head> <body> <ul class="top-nav"> <li> <a href="#">螞蟻部落</a> <ul> <li> <a href="#">前端課程 +</a> <ul> <li><a href="#">javascript</a></li> <li><a href="#">css</a></li> <li><a href="#">jquery</a></li> </ul> </li> <li> <a href="#">手機開發+</a> <ul> <li><a href="#">ios開發</a></li> <li><a href="#">android開發</a></li> <li><a href="#">WP開發</a></li> </ul> </li> <li><a href="#">後臺程式設計</a></li> </ul> </li> <li><a href="#">課程大廳</a> </li> <li> <a href="#">學習中心 +</a> <ul> <li> <a href="#">前端課程 +</a> <ul> <li><a href="#">javascript</a></li> <li><a href="#">css</a></li> <li><a href="#">jquery</a></li> </ul> </li> <li> <a href="#">手機開發</a> <ul> <li><a href="#">ios開發</a></li> <li><a href="#">android開發</a></li> <li><a href="#">WP開發</a></li> </ul> </li> <li><a href="#">後臺程式設計</a></li> </ul> </li> <li><a href="#">關於我們</a></li> </ul> </body> </html>
相關文章
- CSS垂直三級導航選單CSS
- CSS3橫向導航選單效果CSSS3
- JavaScript橫向二級導航選單效果JavaScript
- css3水平滑動導航選單效果CSSS3
- 純CSS實現的二級導航選單效果程式碼例項CSS
- jQuery 緩衝效果二級導航下拉選單jQuery
- CSS垂直導航選單CSS
- css實現立體效果橫向導航選單CSS
- CSS 動態導航選單CSS
- JavaScript 三級導航選單JavaScript
- JavaScript二級導航選單JavaScript
- CSS多級選單CSS
- CSS導航欄及下拉選單CSS
- CSS3動畫效果下拉導航選單效果CSSS3動畫
- 垂直樹形多級導航選單程式碼例項
- CSS實現的側欄三級導航選單程式碼CSS
- 純CSS打造淘寶導航選單欄CSS
- 純css製作導航下拉選單CSS
- CSS 平行四邊形導航選單CSS
- 具有響應式效果的導航選單
- css3實現緩慢下拉手風琴導航選單效果CSSS3
- css3實現的水平立體動態導航選單效果CSSS3
- jQuery三級導航選單詳解jQuery
- CSS 可伸縮圓角導航選單CSS
- CSS3垂直摺疊導航選單CSSS3
- CSS水平導航選單製作詳解CSS
- CSS 水平導航選單製作詳解CSS
- jQuery css3環形導航選單jQueryCSSS3
- CSS3麵包屑導航選單CSSS3
- 具有彈性效果的右鍵導航選單
- css3實現的立體導航選單效果程式碼例項CSSS3
- css簡單水平導航選單程式碼例項CSS
- CSS三級下拉導航選單詳解CSS
- 純CSS二級下拉導航選單實CSS
- css3實現動態導航選單CSSS3
- css樹形導航選單程式碼例項CSS
- js頂部可以伸縮的導航選單效果JS
- js實現的響應式導航選單效果JS