css三級下拉導航選單程式碼例項
分享一段程式碼例項,它實現了三級下拉導航選單效果。
這樣的功能在實際應用中還是非常普遍的。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> * { margin: 0; padding: 0; } body { background: #f5f5f5; color: #000; font-size: 12px; font-style: normal; } li { list-style: none; } a { text-decoration: none; color: #f50; } a:hover { text-decoration: underline; color: #f50; } .clearfix:before, .clearfix:after { display: table; content: ''; } .clearfix:after { clear: both; } .flt { float: left; } .frt { float: right; } .navbox { width: 960px; height: 40px; margin: 20px auto; background: #08c; } .navbox > ul > li { float: left; width: 160px; height: 40px; line-height: 40px; text-align: center; font-size: 16px; } .navbox ul li a { display: block; color: #fff; background: #08c; } .navbox ul li a:hover { text-decoration: none; background: #00bfff; } .navbox ul li:hover .subnav { display: block; } .subnav > li { position: relative; } .threenav { position: absolute; top: 0; left: 160px; width: 160px; } .subnav, .threenav { display: none; } .subnav li:hover .threenav { display: block; } </style> </head> <body> <div class="navbox"> <ul class="clearfix"> <li><a href="#">螞蟻部落一</a></li> <li><a href="#">螞蟻部落二</a></li> <li> <a href="#">螞蟻部落三</a> <ul class="subnav"> <li><a href="#">HTML</a></li> <li> <a href="#">CSS</a> <ul class="threenav"> <li><a href="#">css1</a></li> <li><a href="#">css2</a></li> <li><a href="#">css3</a></li> </ul> </li> <li><a href="#">JavaScript</a></li> </ul> </li> <li><a href="#">螞蟻部落四</a></li> <li><a href="#">螞蟻部落五</a></li> <li><a href="#">螞蟻部落六</a></li> </ul> </div> </body> </html>
相關文章
- css水平下拉導航選單程式碼例項CSS
- CSS三級下拉導航選單詳解CSS
- jq+css+html打造下拉導航選單例項CSSHTML單例
- 具有淡入淡出效果的下拉導航選單例項程式碼單例
- 純CSS二級下拉導航選單實CSS
- css簡單水平導航選單程式碼例項CSS
- css樹形導航選單程式碼例項CSS
- css滑鼠懸浮二級下拉導航選單CSS
- javascript實現的三級下拉導航選單JavaScript
- css二級下拉選單程式碼例項CSS
- CSS3 扇形導航選單程式碼例項CSSS3
- 純CSS實現的二級導航選單效果程式碼例項CSS
- CSS3立體導航選單程式碼例項CSSS3
- CSS製作橫向導航選單例項程式碼CSS單例
- 垂直樹形多級導航選單程式碼例項
- CSS學習案例(14):下拉導航選單CSS
- CSS垂直三級導航選單CSS
- 蜂巢式導航選單程式碼例項
- jquery二級下拉導航選單詳解jQuery
- CSS實現的側欄三級導航選單程式碼CSS
- CSS3動畫效果下拉導航選單效果CSSS3動畫
- javascript樹形導航選單例項程式碼JavaScript單例
- 響應式導航選單程式碼例項
- 二級下拉導航選單製作詳解
- jquery實現的點選二級下拉導航選單jQuery
- css3實現的立體導航選單效果程式碼例項CSSS3
- 自定義右鍵導航選單程式碼例項
- 垂直手風琴導航選單程式碼例項
- 網頁頂部導航選單程式碼例項網頁
- 純CSS實現的二級下拉選單效果程式碼例項CSS
- jQuery 省市級聯選單程式碼例項jQuery
- js省市級聯選單程式碼例項JS
- 38 個免費開源的 CSS 下拉導航選單CSS
- css 兄弟選擇器簡單程式碼例項CSS
- 動態生成select三級聯動選單程式碼例項
- 垂直可伸縮的導航選單例項程式碼單例
- JavaScript slide下拉導航選單效果JavaScriptIDE
- 側欄能夠定位的導航選單程式碼例項