• 我们先看一下最终效果。

图1

一、开始吧，我们先做一个盒子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

Document