css水平下拉導航選單程式碼例項
分享一段程式碼例項,它實現了滑鼠懸浮,能夠出現二級下拉導航選單的效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> * { margin: 0; padding: 0; font-size: 14px; } .nav { width: 800px; margin: 0 auto; } ul { list-style: none; } .li0 { float: left; position: relative; } .nav a { display: block; text-decoration: none; width: 100px; height: 45px; line-height: 45px; background-color: #999; color: #111; text-align: center; } .nav a:hover { color: #fff; background-color: #f00; } .nav1 { position: absolute; left: 0; display: none; } .li0:hover .nav1 { display: block; background-color: #bbb; } </style> </head> <body> <ul class="nav"> <li class="li0"><a href="">首頁</a></li> <li class="li0"> <a href="">前端</a> <ul class="nav1"> <li><a href="">前端</a></li> <li><a href="">前端</a></li> <li><a href="">前端</a></li> </ul> </li> <li class="li0"> <a href="">後端</a> <ul class="nav1"> <li><a href="">後端</a></li> <li><a href="">後端</a></li> <li><a href="">後端</a></li> </ul> </li> <li class="li0"> <a href="">資料庫</a> <ul class="nav1"> <li><a href="">資料庫</a></li> <li><a href="">資料庫</a></li> <li><a href="">資料庫</a></li> </ul> </li> <li class="li0"> <a href="">程式碼實戰</a> <ul class="nav1"> <li><a href="">程式碼1</a></li> <li><a href="">程式碼2</a></li> <li><a href="">程式碼3</a></li> </ul> </li> <li class="li0"> <a href="">讀書筆記</a> <ul class="nav1"> <li><a href="">筆記1</a></li> <li><a href="">筆記2</a></li> <li><a href="">筆記3</a></li> </ul> </li> <li class="li0"> <a href="">聯絡我</a> <ul class="nav1"> <li><a href="">antzone</a></li> <li><a href="">softwhy.com</a></li> <li><a href="">螞蟻部落</a></li> </ul> </li> </ul> </body> </html>
相關文章
- css三級下拉導航選單程式碼例項CSS
- css簡單水平導航選單程式碼例項CSS
- jq+css+html打造下拉導航選單例項CSSHTML單例
- 具有淡入淡出效果的下拉導航選單例項程式碼單例
- css樹形導航選單程式碼例項CSS
- CSS3 扇形導航選單程式碼例項CSSS3
- CSS3立體導航選單程式碼例項CSSS3
- CSS製作橫向導航選單例項程式碼CSS單例
- CSS三級下拉導航選單詳解CSS
- CSS學習案例(14):下拉導航選單CSS
- 純CSS二級下拉導航選單實CSS
- 蜂巢式導航選單程式碼例項
- CSS3動畫效果下拉導航選單效果CSSS3動畫
- css滑鼠懸浮二級下拉導航選單CSS
- javascript樹形導航選單例項程式碼JavaScript單例
- 響應式導航選單程式碼例項
- 純CSS實現的二級導航選單效果程式碼例項CSS
- css水平垂直居中程式碼例項CSS
- CSS讓div水平居中例項程式碼CSS
- css二級下拉選單程式碼例項CSS
- css3實現的立體導航選單效果程式碼例項CSSS3
- 自定義右鍵導航選單程式碼例項
- 垂直手風琴導航選單程式碼例項
- 網頁頂部導航選單程式碼例項網頁
- css多元素水平居中效果程式碼例項CSS
- 38 個免費開源的 CSS 下拉導航選單CSS
- css 兄弟選擇器簡單程式碼例項CSS
- 垂直樹形多級導航選單程式碼例項
- 垂直可伸縮的導航選單例項程式碼單例
- CSS水平導航選單製作詳解CSS
- CSS 水平導航選單製作詳解CSS
- css設定div水平居中程式碼例項CSS
- JavaScript slide下拉導航選單效果JavaScriptIDE
- 側欄能夠定位的導航選單程式碼例項
- 可以固定的頂部的導航選單簡單例項程式碼單例
- 純css tab選項卡程式碼例項CSS
- css3水平滑動導航選單效果CSSS3
- css不定寬度元素水平居中程式碼例項CSS