一、开始吧，我们先做一个盒子drop，它往后要装的是按钮和下拉列表。
图2
二、在盒子drop里面做一个按钮dropbt。
图3
图4
三、按钮有点丑了，于是我们给按钮加点样式。
图5
图6
四、下面我们做出下拉列表，它们是一串链接，我们用一个盒子dropbox装着。
图7
图8
五、列表是横着的，而且不怎么好看，我们先改超链接a的样式。
图9
图10
六、菜单列表好看许多了，我们给列表盒子dropbox加点样式，比如阴影。
图11
图12
七、再好看的菜单列表一开始也是要先隐蔽的。
图13
图14
八、我们让鼠标移到按钮上时，按钮颜色变浅。
图15
图16
九、现在可以设置点击后，下拉菜单涌现了。
图17
图18
十、下拉菜单涌现了，但你会创造鼠标在右侧时，菜单也会弹出来，我们改一下样式，办理这个问题，再次移过去的时候，你会创造只有在按钮位置才会弹出菜单了。
图19
十一、完善一下，当鼠标移动菜单列表时，背景色改变。
图20
图21
<!DOCTYPE html><html lang=\"大众en\公众><head> <meta charset=\"大众UTF-8\"大众> <title>Document</title> <style> .dropbt{ padding: 10px; / 按钮内边框离 / font-size: 16px; / 按钮字体大小 / background: #369; / 按钮背景色 / border: none; / 去掉按钮边框 / color: white; / 按钮字的颜色 / cursor: pointer; / 鼠标在按钮上的小手标记 / } .dropbox a { color: black; / 链接字的颜色改成玄色 / padding: 10px; / 链接内边距 / text-decoration: none; / 去掉可恶的下划线 / display: block; / 链接独立成行 / } .dropbox{ display: none; / 不显示 / position: absolute; / 盒子的位置为相对定位 / background-color: #f9f9f9; / 盒子的背景色 / box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2); / 盒子的阴影，这里设置了右边4下边8 / } .drop:hover .dropbt{ background: #2f84d8; / 鼠标在按钮上时，按钮背景色变 / } .drop:hover .dropbox{ display: block; / 鼠标在drop上时，dropbox菜单涌现 / } .drop{ display: inline-block; / 这是让盒子drop不占整行，去掉盒子天生占行的属性 / } .dropbox a:hover{ background: #cccdcf; / 这里是鼠标移动菜单列表时改变背景色 / } </style></head><body> <div class=\"大众drop\公众> <button class=\"大众dropbt\"大众>点我下拉菜单</button> <div class=\"大众dropbox\"大众> <a href=\"大众#\"大众>是下拉菜单一</a> <a href=\"大众#\"大众>是下拉菜单二</a> <a href=\公众#\"大众>是下拉菜单三</a> </div> </div></body></html>
