参考手册
CSS 教程
CSS 导航栏
CSS 图片画廊

CSS 下拉菜单

使用 CSS 创建可悬停的下拉列表。

演示：下拉式案例

下拉文本

Hello World!

链接 1 链接 2 链接 3
其他: Cinque Terre
Cinque Terre
Beautiful Cinque Terre

基础的下拉菜单

创建当用户将鼠标移到元素上时出现的下拉框。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .dropdown {
  6.   position: relative;
  7.   display: inline-block;
  8. }
  10. .dropdown-content {
  11.   display: none;
  12.   position: absolute;
  13.   background-color: #f9f9f9;
  14.   min-width: 160px;
  15.   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  16.   padding: 12px 16px;
  17.   z-index: 1;
  18. }
  20. .dropdown:hover .dropdown-content {
  21.   display: block;
  22. }
  23. </style>
  24. </head>
  25. <body>
  27. <h1>可悬停的下拉菜单</h1>
  29. <p>请把鼠标移到文本上，已查看下拉内容。</p>
  31. <div class="dropdown">
  32.   <span>把鼠标移到我上面</span>
  33.   <div class="dropdown-content">
  34.   <p>Hello World!</p>
  35.   </div>
  36. </div>
  38. </body>
  39. </html>
运行一下
例子解释：

HTML 使用任何元素打开下拉菜单内容，例如 <span> 或 <button> 元素。使用容器元素（如 <div>）创建下拉内容，并在其中添加任何内容。用 <div> 元素包围这些元素，使用 CSS 正确定位下拉内容。

CSS.dropdown 类使用 position:relative ，当我们希望将下拉内容放置在下拉按钮的正下方（使用 position:absolute ）时，需要使用该类。

.dropdown-content 类保存实际的下拉菜单内容。默认情况下它是隐藏的，并将在悬停时显示（请看下文）。请注意，min-width 设置为 160px。可随时更改此设置。提示：如果您希望下拉内容的宽度与下拉按钮的宽度一样，请将宽度设置为 100％（设置 overflow:auto 可实现在小屏幕上滚动）。

我们用了 CSS box-shadow 属性，而不是边框，这样下拉菜单看起来像一张“卡片”。当用户将鼠标移到下拉按钮上时，:hover 选择器用于显示下拉菜单。

下拉式菜单

创建一个下拉菜单，并允许用户从列表中选择一个选项：

链接 1 链接 2 链接 3

本例与上例相似，除了我们在下拉框内添加链接并为其设置了样式，以此匹配下拉按钮的样式：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .dropbtn {
  6.   background-color: #4CAF50;
  7.   color: white;
  8.   padding: 16px;
  9.   font-size: 16px;
  10.   border: none;
  11.   cursor: pointer;
  12. }
  14. .dropdown {
  15.   position: relative;
  16.   display: inline-block;
  17. }
  19. .dropdown-content {
  20.   display: none;
  21.   position: absolute;
  22.   background-color: #f9f9f9;
  23.   min-width: 160px;
  24.   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  25.   z-index: 1;
  26. }
  28. .dropdown-content a {
  29.   color: black;
  30.   padding: 12px 16px;
  31.   text-decoration: none;
  32.   display: block;
  33. }
  35. .dropdown-content a:hover {background-color: #f1f1f1}
  37. .dropdown:hover .dropdown-content {
  38.   display: block;
  39. }
  41. .dropdown:hover .dropbtn {
  42.   background-color: #3e8e41;
  43. }
  44. </style>
  45. </head>
  46. <body>
  48. <h1>下拉菜单</h1>
  50. <p>请把鼠标移到按钮上，以打开下拉菜单。</p>
  52. <div class="dropdown">
  53.   <button class="dropbtn">Dropdown</button>
  54.   <div class="dropdown-content">
  55.   <a href="#">链接 1</a>
  56.   <a href="#">链接 2</a>
  57.   <a href="#">链接 3</a>
  58.   </div>
  59. </div>
  61. <p><b>备注:</b>我们的测试链接用了 href="#"。真实的网站会用 URL。</p>
  63. </body>
  64. </html>
运行一下

右对齐的下拉菜单内容

链接 1 链接 2 链接 3
链接 1 链接 2 链接 3

如果希望下拉菜单从右到左而不是从左到右，请添加 right: 0;：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .dropbtn {
  6.   background-color: #4CAF50;
  7.   color: white;
  8.   padding: 16px;
  9.   font-size: 16px;
  10.   border: none;
  11.   cursor: pointer;
  12. }
  14. .dropdown {
  15.   position: relative;
  16.   display: inline-block;
  17. }
  19. .dropdown-content {
  20.   display: none;
  21.   position: absolute;
  22.   right: 0;
  23.   background-color: #f9f9f9;
  24.   min-width: 160px;
  25.   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  26.   z-index: 1;
  27. }
  29. .dropdown-content a {
  30.   color: black;
  31.   padding: 12px 16px;
  32.   text-decoration: none;
  33.   display: block;
  34. }
  36. .dropdown-content a:hover {background-color: #f1f1f1;}
  38. .dropdown:hover .dropdown-content {
  39.   display: block;
  40. }
  42. .dropdown:hover .dropbtn {
  43.   background-color: #3e8e41;
  44. }
  45. </style>
  46. </head>
  47. <body>
  49. <h1>对齐的下拉内容</h1>
  51. <p>通过 left 和 right 属性，决定下拉内容是左到右还是右到左。</p>
  53. <div class="dropdown" style="float:left;">
  54.   <button class="dropbtn">左</button>
  55.   <div class="dropdown-content" style="left:0;">
  56.   <a href="#">链接 1</a>
  57.   <a href="#">链接 2</a>
  58.   <a href="#">链接 3</a>
  59.   </div>
  60. </div>
  62. <div class="dropdown" style="float:right;">
  63.   <button class="dropbtn">右</button>
  64.   <div class="dropdown-content">
  65.   <a href="#">链接 1</a>
  66.   <a href="#">链接 2</a>
  67.   <a href="#">链接 3</a>
  68.   </div>
  69. </div>
  71. </body>
  72. </html>
运行一下

更多实例

1 - 下拉式图像

如何在下拉框中添加图像和其他内容。

请把鼠标指针悬停在图像上:

Cinque Terre
Cinque Terre
Beautiful Cinque Terre
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .dropdown {
  6.   position: relative;
  7.   display: inline-block;
  8. }
  10. .dropdown-content {
  11.   display: none;
  12.   position: absolute;
  13.   background-color: #f9f9f9;
  14.   min-width: 160px;
  15.   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  16.   z-index: 1;
  17. }
  19. .dropdown:hover .dropdown-content {
  20.   display: block;
  21. }
  23. .desc {
  24.   padding: 15px;
  25.   text-align: center;
  26. }
  27. </style>
  28. </head>
  29. <body>
  31. <h2>下拉图片</h2>
  32. <p>将鼠标悬浮于图片之上来展开图片。</p>
  34. <div class="dropdown">
  35.   <img src="/images/img_5terre.jpg" alt="Cinque Terre" width="100" height="50">
  36.   <div class="dropdown-content">
  37.   <img src="/images/img_5terre.jpg" alt="Cinque Terre" width="300" height="200">
  38.   <div class="desc">Beautiful Cinque Terre</div>
  39.   </div>
  40. </div>
  42. </body>
  43. </html>
运行一下
2 - 下拉式导航

如何在导航栏中添加下拉菜单。

下拉菜单式导航条

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <style>
  5.         ul {
  6.             list-style-type: none;
  7.             margin: 0;
  8.             padding: 0;
  9.             overflow: hidden;
  10.             background-color: #333;
  11.         }
  13.         li {
  14.             float: left;
  15.         }
  17.         li a, .dropbtn {
  18.             display: inline-block;
  19.             color: white;
  20.             text-align: center;
  21.             padding: 14px 16px;
  22.             text-decoration: none;
  23.         }
  25.         li a:hover, .dropdown:hover .dropbtn {
  26.             background-color: red;
  27.         }
  29.         li.dropdown {
  30.             display: inline-block;
  31.         }
  33.         .dropdown-content {
  34.             display: none;
  35.             position: absolute;
  36.             background-color: #f9f9f9;
  37.             min-width: 160px;
  38.             box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  39.             z-index: 1;
  40.         }
  42.         .dropdown-content a {
  43.             color: black;
  44.             padding: 12px 16px;
  45.             text-decoration: none;
  46.             display: block;
  47.             text-align: left;
  48.         }
  50.         .dropdown-content a:hover {
  51.             background-color: #f1f1f1;
  52.         }
  54.         .dropdown:hover .dropdown-content {
  55.             display: block;
  56.         }
  57.     </style>
  58. </head>
  59. <body>
  61.     <ul>
  62.         <li><a href="#home">首页</a></li>
  63.         <li><a href="#news">新闻</a></li>
  64.         <li class="dropdown">
  65.             <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
  66.             <div class="dropdown-content">
  67.                 <a href="#">链接 1</a>
  68.                 <a href="#">链接 2</a>
  69.                 <a href="#">链接 3</a>
  70.             </div>
  71.         </li>
  72.     </ul>
  74.     <h3>导航条中的下拉菜单</h3>
  75.     <p>将鼠标悬停在“Dropdown”链接上以查看下拉菜单。</p>
  77. </body>
  78. </html>
运行一下
CSS 导航栏
CSS 图片画廊

分类导航

HTMLHTML5JAVASCRIPTCSSjQueryBootstrap 3 教程SassReactHTMl 颜色教程JSONXMLXPathTypeScriptAppML 教程XLinkXPointerXQueryXFormsXsltXML SchemaXSL-FOWeb ServiceWSDSOAPW3CSVGDHTMLTCP/IPjQuery Mobile 教程XHTML