DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> css制作黑色經典導航下拉菜單
css制作黑色經典導航下拉菜單
編輯：CSS詳解     
這篇文章主要為大家詳細介紹了CSS制作黑色經典導航下拉菜單的相關代碼，大氣簡單，具有一定的參考價值，感興趣的小伙伴們可以參考一下 文分享的例子，在導航欄菜單中添加下拉菜單，分享給大家供大家參考，具體內容如下 XML/Html Code復制內容到剪貼板
  1. <!DOCTYPE Html>
  2. <Html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>導航欄下拉菜單</title>
  6. <style>
  7. *{margin:0;padding:0;}
  8. ul{
  9. list-style-type:none;
  10. background-color:#333;
  11. overflow:hidden;
  12. }
  13. li{
  14. float:left;
  15. }
  16. li a, .dropbtn{
  17. display:inline-block;
  18. color:white;
  19. text-align:center;
  20. padding:14px 16px;
  21. text-decoration:none;
  22. }
  24. li a:hover, .dropdown:hover .dropbtn{
  25. background-color:#111;
  26. }
  28. .dropdown{
  29. display:inline-block;
  30. }
  32. .dropdown-content{
  33. min-width:200px;
  34. background-color:#F9F9F9;
  35. position:absolute;
  36. display:none;
  37. box-shadow:0px 8px 15px 0px rgba(0,0,0,0.2);
  38. }
  40. .dropdown-content a{
  41. color:black;
  42. padding:12px 16px;
  43. text-decoration:none;
  44. display:block;
  45. }
  47. .dropdown-content a:hover{
  48. background-color:#F1F1F1;
  49. }
  51. .dropdown:hover .dropdown-content{
  52. display: block;
  53. }
  54. </style>
  55. </head>
  56. <body>
  57. <ul>
  58. <li><a href="#shop" class="active">在線商城</a></li>
  59. <li><a href="#news">產品展示</a></li>
  60. <div class="dropdown">
  61. <a href="#" class="dropbtn">下拉菜單</a>
  62. <div class="dropdown-content">
  63. <a href="#">子菜單 1</a>
  64. <a href="#">子菜單 2</a>
  65. <a href="#">子菜單 3</a>
  66. </div>
  67. </div>
  68. </ul>
  69. </body>
  70. </Html>

在 Chrome 中當鼠標移入下拉按鈕時顯示如下：

以上就是本文的全部內容，希望對大家的學習有所幫助。

CSS詳解
CSS實例：用CSS制作網頁像素畫
在cssplay網站看到有一組CSS像素畫，於是也想摩仿一下，於是在網絡上找到一組頭像圖標，看其結
探究DIV顯示和隱藏用法
本文向大家介紹一下對DIV的操作，主要針對DIV顯示和隱藏操作，希望本文的介紹能讓你有所收獲。一.
Div+CSS布局入門教程(四)
四、頁面制作(1)----用好border和clear　　由於找工作找房子的原因，隔了這麼久才能開

相關文章

CSS基礎知識Sass教程CSS3基礎關於CSSCSS進階教程DIV十CSS布局CSS特效代碼CSS詳解
小編推薦
十步學會用css建站 網頁在IE6下錯位在IE7下正常的問題 網站頂部導航條必須要提供的內容和功能 文本反復變化的特效 CSS設計網頁頭部的優化寫法 input標簽寫CSS時需要注意的幾點 支持Web標准，在中國 CSS網頁布局開發應該使用什麼軟件比較好？ CSS中的一些百分比相關調試經驗分享 完全掌握純CSS布局網頁
熱門推薦
CSS網頁制作實例:制作有彈性的日歷表 簡單實用的五個CSS屬性(1) 瀑布流的布局方式:360圖片搜索美女圖片瀑布流布局分析 使用ul進行網頁的多列布局 用HTML和CSS寫出漂亮正規的BLOG 用css網站布局之十步實錄！（二） 網頁制作經驗:id與class的使用原則 CSS網頁布局:tbody標簽與thead和tfoot標簽 CSS 文字漸變實現方法
大家都在看
網頁分辨率設置技巧 鼠標跟隨的文字提示 JS分頁控件 可用於無刷新分頁 HTML5標准將把互聯網視頻扔回到黑暗時代 Bootstrap3制作圖片輪播效果 node.js中的querystring.stringify方法教程使用說明詳解 jQuery EasyUI datagrid實現本地分頁的方法教程 Javascript動態創建div的方法
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved