CSS下拉菜单

例子：

鼠标移动到按钮上打开下拉菜单。（在这里我将下拉菜单的内容的链接设置为百度首页）

HTML 部分：

制作下拉菜单可以使用任何的 HTML元素来打开下拉菜单，如：<span>, 或 <button> 元素。

使用容器元素 (如： <div>) 来创建下拉菜单的内容，并放在任何你想放的位置上。

使用 <div> 元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。

CSS 部分：

.dropdown 类使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置。

.dropdown-content 类中是实际的下拉菜单。默认是隐藏的，在鼠标移动到指定元素后会显示。注：如果你想设置下拉内容与下拉按钮的宽度一致，可设置 width 为 100% 。

使用 box-shadow 属性让下拉菜单看起来像一个"卡片"，更有立体感。

:hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。

 1 <style>
 2 /* 下拉按钮样式 */
 3 .dropbtn {
 4     background-color: #4CAF50;
 5     color: white;
 6     padding: 16px;
 7     font-size: 16px;
 8     border: none;
 9     cursor: pointer;
10 }
11 
12 /* 容器 <div> - 定位下拉内容 */
13 .dropdown {
14     position: relative;
15     display: inline-block;
16 }
17 
18 /* 下拉内容 */
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 }
26 
27 /* 下拉菜单的链接 */
28 .dropdown-content a {
29     color: black;
30     padding: 12px 16px;
31     text-decoration: none;
32     display: block;
33 }
34 
35 /* 鼠标移上去后修改下拉菜单链接颜色 */
36 .dropdown-content a:hover {background-color: #f1f1f1}
37 
38 /* 在鼠标移上去后显示下拉菜单 */
39 .dropdown:hover .dropdown-content {
40     display: block;
41 }
42 
43 /* 当下拉内容显示后修改下拉按钮的背景颜色 */
44 .dropdown:hover .dropbtn {
45     background-color: #3e8e41;
46 }
47 </style>
48 
49 <div class="dropdown">
50     <button class="dropbtn">下拉菜单</button>
51         <div class="dropdown-content">
52             <a href="http://www.baidu.com">菜单内容 1</a> 
53             <a href="http://www.baidu.com">菜单内容 2</a> 
54             <a href="http://www.baidu.com">菜单内容 3</a>
55         </div>
56 </div>

效果图：

还可以将下拉内容设置为图片，起到一个类似于图片放大的效果。

 1 <style>
 2 .dropdown {
 3     position: relative;
 4     display: inline-block;
 5 }
 6 
 7 .dropdown-content {
 8     display: none;
 9     position: absolute;
10     background-color: #f9f9f9;
11     min-width: 160px;
12     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
13 }
14 
15 .dropdown:hover .dropdown-content {
16     display: block;
17 }
18 
19 .desc {
20     padding: 15px;
21     text-align: center;
22 }
23 </style>
24 </head>
25 <body>
26 
27 <h2>下拉图片</h2>
28 <p>移动鼠标到图片上显示下拉内容。</p>
29 
30 <div class="dropdown">
31   <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1466689081,2386523910&fm=23&gp=0.jpg" alt="Trolltunga Norway" width="100" height="50">
32   <div class="dropdown-content">
33     <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1466689081,2386523910&fm=23&gp=0.jpg" alt="Trolltunga Norway" width="200" height="100">
34     <div class="desc">添加图片描述</div>
35   </div>
36 </div>

View Code

效果图：