DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 純html+css制作三級下拉菜單
純html+css制作三級下拉菜單
編輯：CSS詳解     
這篇文章主要介紹了純Html+CSS制作三級下拉菜單，如何制作下拉菜單效果，三級下拉菜單又是怎麼實現的，本文為大家揭曉，感興趣的小伙伴們可以參考一下

直入主題，Html+CSS制作三級下拉菜單實現代碼分享給大家，具體內容如下

1.Html代碼

XML/Html Code復制內容到剪貼板
  1. <!DOCTYPE>
  2. <Html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>三級下拉菜單導航欄</title>
  6. <link rel="stylesheet" type="text/CSS" href="style.CSS">
  7. </head>
  8. <body bgcolor="aliceblue">
  9. <ul class="nav">
  10. <li>
  11. <a href="" target="_blank">
  12. 手機數碼<span class="triangle">▼</span></a>
  13. <ul>
  14. <li><a href="#" target="_blank">
  15. 手機 <span class="triangle">▶</span>
  16. </a>
  17. <ul>
  18. <li><a href="">小米</a></li>
  19. <li><a href="">華為</a></li>
  20. <li><a href="">魅族</a></li>
  21. </ul>
  22. </li>
  23. <li><a href="">
  24. 電腦 <span class="triangle">▶</span>
  25. </a>
  26. <ul>
  27. <li><a href="">平板</a></li>
  28. <li><a href="">筆記本</a></li>
  29. <li><a href="">台式</a></li>
  30. </ul>
  31. </li>
  32. <li><a href="">相機</a></li>
  33. </ul>
  34. </li>
  35. <li><a href="">男裝女裝<span class="triangle">▼</span></a>
  36. <ul>
  37. <li><a href="">
  38. 上衣 <span class="triangle">▶</span></a>
  39. <ul>
  40. <li><a href="">襯衫</a></li>
  41. <li><a href="">T恤</a></li>
  42. </ul>
  43. </li>
  44. <li><a href="">
  45. 褲子 <span class="triangle">▶</span></a>
  46. <ul>
  47. <li><a href="">牛仔褲</a></li>
  48. <li><a href="">休閒褲</a></li>
  49. </ul>
  50. </li>
  51. </ul>
  52. </li>
  53. <li><a href="">運動戶外<span class="triangle">▼</span></a>
  54. <ul>
  55. <li><a href="">運動鞋</a></li>
  56. <li><a href="">運動服</a></li>
  57. <li><a href="">運動設備</a></li>
  58. </ul>
  59. </li>
  60. <li>
  61. <a href="">時尚百貨</a>
  62. </li>
  63. <li><a href="">生活服務<span class="triangle">▼</span></a>
  64. <ul>
  65. <li><a href="">萬能繳費</a></li>
  66. <ul>
  67. <li><a href="">水費</a></li>
  68. <li><a href="">電費</a></li>
  69. </ul>
  70. <li><a href="">教育培訓</a></li>
  71. <li><a href="">話費充值</a></li>
  72. </ul>
  73. </li>
  74. <li>
  75. <a href=""> 匯吃美食</a>
  76. </li>
  77. <li>
  78. <a href=""> 家居家紡<span class="triangle">▼</span></a>
  79. <ul>
  80. <li><a href="">
  81. <span class="triangle">◀</span> 床上用品</a>
  82. <ul class="nav1">
  83. <li><a href="">被子</a></li>
  84. <li><a href="">枕頭</a></li>
  85. </ul>
  86. </li>
  87. <li>
  88. <a href=""><span class="triangle">◀</span> 客廳家具</a>
  89. <ul class="nav1">
  90. <li><a href="">茶具</a></li>
  91. <li><a href="">沙發</a></li>
  92. <li><a href="">椅子</a></li>
  93. </ul>
  94. </li>
  95. </ul>
  96. </li>
  97. </ul>
  98. </body>
  99. </Html>

2.CSS 代碼

CSS Code復制內容到剪貼板
  1. *{
  2. padding: 0;
  3. margin: 0;
  4. }
  5. ul{
  6. list-style-type:none;
  7. }
  8. .triangle{
  10. font-size: 1em;
  11. color: white;
  12. }
  13. a{
  14. text-decoration:none;
  15. text-align: center;
  16. font-weight: bold;
  18. }
  19. /*一級導航*/
  20. ul.nav{
  21. float: left;
  22. border:1px solid gray;
  23. margin-left: 10%;
  24. margin-top:10px;
  25. border-radius: 4px;
  26. position: fixed;
  27. }
  28. ul.nav li{
  29. float: left;
  30. width: 9em;
  31. background-color:yellowgreen;
  32. }
  33. ul.nav a{
  34. display: block;
  35. color: white;
  36. line-height: 1.5em;
  37. border-right: 1px solid white;
  38. border-left: 1px solid white;
  39. padding: 5px;
  40. }
  42. ul.nav a:hover,
  43. ul.nav a:focus{
  44. color: black;
  45. background-color: #98FB98;
  46. opacity: 0.5;
  47. }
  48. ul.nav li:first-child a{
  49. border-left: 0;
  50. border-bottom: 0;
  51. }
  52. ul.nav li:last-child a{
  53. border-right: 0;
  54. border-bottom: 0;
  55. }
  56. /*二級導航*/
  57. ul.nav li ul{
  58. width: 10em;
  59. position: absolute;
  60. left: -1000em;
  61. }
  63. ul.nav li:hover ul{
  64. width: 10em;
  65. left:auto;
  66. }
  68. ul.nav li ul a{
  69. border-top: 1px solid white;
  70. border-bottom: 1px solid white;
  71. border-left: 0;
  72. border-right: 0;
  74. }
  75. /*三級導航*/
  76. ul.nav li:hover ul li ul{
  77. width: 10em;
  78. position: absolute;
  79. left: -1000em;
  81. }
  83. ul.nav li:hover ul li:hover ul{
  84. left: auto;
  85. margin-left: 9.1em;
  86. margin-top: -2.1em;
  87. }
  88. ul.nav li:hover ul li:hover ul.nav1{
  89. left: auto;
  90. margin-left: -9.1em;
  91. margin-top: -2.1em;
  92. }

以上就是本文的全部內容，歡迎大家學習完善。

CSS詳解
創建一個自己的bootstrap模板示例
代碼如下:<!DOCTYPE Html><Html lang=zh-cn>
用css網站布局之十步實錄！（一）
第一
CSS實例教程:CSS制作好看的網頁表格
如果數據表格對於視力沒有問題用戶都難以閱讀的話,那麼想像一個那些用輔助技術(掌上設備)的人來說,它

相關文章

CSS基礎知識Sass教程CSS3基礎關於CSSCSS進階教程DIV十CSS布局CSS特效代碼CSS詳解
小編推薦
HTML5網頁3D技術標准發布 無需插件即可將網頁3D化 支持IE6 IE7 Firefox的純CSS的下拉菜單 CSS樣式表教程-If you love css clip屬性全知道 CSS3邊框 DIV style常用屬性(2) 使浏覽者自己選擇回退的頁面數 CSS中實現id與class命名及編碼的六大技巧 淺議Web網頁Form表單設計技巧 DIV垂直居中的辦法
熱門推薦
用CSS把標題超出的部分變成... Window Media Player 播放器 利用CSS生成精美細線Table表格無需復雜style代碼 網頁布局教程:CSS多列布局問題簡單解決方案 css漂亮的輸入框:CSS美化的漂亮搜索框 DIV布局屬性用法詳盡解讀(2) 各種跨浏覽器兼容的CSS編碼准則和技巧 用css樣式控制超鏈接顏色顯示 DIV CSS布局
大家都在看
JS實現背景透明度可變，文字不透明的效果 用戶體驗:用戶體驗的評估和度量很難 微信公眾號-獲取用戶信息（網頁授權獲取）實現步驟 js數組方法擴展實現數組統計函數 XML簡明教程（五） - asp.net css sprites適用范圍和css sprites的利弊 HTML的TextArea中保存格式問題解決方法 jquery新的綁定事件機制on方法的使用方法
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved