css二級下拉選單程式碼例項
分享一段非常簡單的程式碼例項,它使用css實現了二級下拉導航選單效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> body { margin: 0; } ul { margin: 0; padding: 0; list-style-type: none; overflow: hidden; background-color: #333; } ul > li { float: left; } ul a { display: block; padding: 15px; color: #fff; text-decoration: none; } .dropdown { display: inline-block; position: absolute; } .dropdown-content { display: none; position: absolute; min-width: 120px; } .dropdown-content a { background-color: #f9f9f9; color: #000; } .dropdown-content a:hover { background-color: #f1f1f1; } .dropdown:hover .dropdown-content { display: block; } ul > li > a:hover { background-color: #111; } </style> </head> <body> <ul> <li><a href="#">螞蟻部落一</a></li> <li><a href="#">螞蟻部落二</a></li> <li><a href="#">螞蟻部落三</a></li> <li class="dropdown"> <a class="dropdown-btn" href="#">螞蟻部落四</a> <div class="dropdown-content"> <a href="#">css教程</a> <a href="#">div教程</a> <a href="#">ajax教程</a> </div> </li> </ul> </body> </html>
相關文章
- 純CSS實現的二級下拉選單效果程式碼例項CSS
- css三級下拉導航選單程式碼例項CSS
- css水平下拉導航選單程式碼例項CSS
- CSS 二級下拉選單CSS
- CSS二級下拉選單CSS
- select下拉選單級聯效果例項程式碼
- select級聯下拉選單程式碼例項分析
- select下拉選單多級級聯效果程式碼例項
- CSS3實現的美觀多級下拉選單效果程式碼例項CSSS3
- jQuery與CSS二級下拉選單jQueryCSS
- select下拉選單美化程式碼例項
- 純CSS實現的二級導航選單效果程式碼例項CSS
- 滑鼠懸浮出現下拉選單程式碼例項
- jQuery美化select下拉選單程式碼例項jQuery
- jQuery操作select下拉選單程式碼例項jQuery
- 模擬select下拉選單程式碼例項
- select下拉選單項互換效果程式碼例項
- javascript刪除select下拉選單項程式碼例項JavaScript
- css實現的二級下拉選單效果CSS
- 純CSS二級下拉導航選單實CSS
- 原生javascript操作select下拉選單程式碼例項JavaScript
- 模擬美化select下拉選單程式碼例項
- Android實現三級聯動下拉框 下拉選單spinner的例項程式碼Android
- css滑鼠懸浮二級下拉導航選單CSS
- 模擬實現select下拉選單例項程式碼單例
- css簡單水平導航選單程式碼例項CSS
- jQuery 省市級聯選單程式碼例項jQuery
- js省市級聯選單程式碼例項JS
- 刪除和新增select下拉選單option項程式碼例項
- jq+css+html打造下拉導航選單例項CSSHTML單例
- jQuery 二級下拉選單jQuery
- css 兄弟選擇器簡單程式碼例項CSS
- css樹形導航選單程式碼例項CSS
- javascript新增和刪除select下拉選單option項程式碼例項JavaScript
- js模擬實現select下拉選單程式碼例項JS
- 點選文字框彈出可檢索下拉選單程式碼例項
- jQuery結合PHP+MySQL實現二級聯動下拉選單[例項]jQueryPHPMySql
- CSS3 扇形導航選單程式碼例項CSSS3