CSS3制作炫酷的下拉菜单及弹起式选单的实例分享

下拉菜单
先直接来看效果是怎样：

当鼠标移到选单之后，下方会展开并有其它说明内容，我这边是把展开的部份加上图片内容，让它有其它不同的变化。因为这样的动作就像人家庙会时会有舞狮从嘴里丢下贺联一样，所以我才取名为”贺联式选单”。

这样的效果其实只需要 html 及 css 配合就能做出来了，我们先来看 html 的部份：
检视原始码 html

xml/html code
复制内容到剪贴板

使用 ul 及 li 来做选单的项目，每一个 li 中的 a 连结是我们主要的选单内容，而其 div 是更进阶的描述内容，若不需要的话则可以不用加。因为我要让每个选单都有不同的背景图，所以还需要帮 a 连结都加一个独立的 class。

然后，我有 7 个 li 选单项目，因此我还请梅干帮忙准备了 7 张图片(果然还是要专业的来)。接着就能开始动手写 css 囉：
检视原始码 css

css code
复制内容到剪贴板

这边用到的 css 语法都是很基础的，比较需要注意的是我们一开始 a 连结的 height 是 50px，所以超过的部份会因为 overflow 为 hidden 的关系而被隐藏起来；另外，当鼠标移到 a 连结后，再额外订了一个 a:hover { } 来把它的 height 撑高，因此原本看不到的背景部份就会显现出来了。

到这边就整个都完成了，一开始浏览时就只有一排的选单

当鼠标移到选项后就会显示完整的背景内容

且我们的选单一样是有超连结的功能，是不是很有趣呢！如果要让效果更优的话，当然还是需要 javascript 的配合才行唷！

弹起式页签选单
一样先直接来看效果是怎样：

跟上一个例子不同的是在此次是鼠标移到选单后会往上升，就象是突然弹起来一样。

这样的效果一样只需要 html 及 css 就能做出来了，我们先来看 html 的部份：

检视原始码 html

xml/html code
复制内容到剪贴板

同样是用 ul 及 li 来做选单的项目，每一个 li 中的 a 连结是我们主要的选单内容，苑阳且为了让每个选单都有不同的选单图片，所以还帮 a 连结都加一个独立的 class。

接着开始动手写 css 囉：
检视原始码 css

css code
复制内容到剪贴板

这边要注意的是 a 连结的 margin-top 是选单图片高的一半 – 31px，所以超过的部份就不会显示出来；另外，当鼠标移到 a 连结后，再额外订了一个 a:hover { } 来减少它的 margin-top，因此原本看不到的背景部份就会显现出来了。

到这边就整个都完成了，一开始浏览时就只有一排的选单

当鼠标移到选项后就会弹起来囉~~