下拉菜单
先直接来看效果是怎样：
当鼠标移到选单之后，下方会展开并有其它说明内容，我这边是把展开的部份加上图片内容，让它有其它不同的变化。因为这样的动作就像人家庙会时会有舞狮从嘴里丢下贺联一样，所以我才取名为"贺联式选单"。
这样的效果其实只需要 HTML 及 CSS 配合就能做出来了，我们先来看 HTML 的部份：
检视原始码 HTML
XML/HTML Code复制内容到剪贴板
<body>
<ul>
<li>
<a class="t1" href="#">梅干桑
<div>自我介绍</div>
</a>
</li>
<li>
<a class="t2" href="#">Photoshop
<div>上课囉!!</div>
</a>
</li>
<li>
<a class="t3" href="#">Q ＆ A
<div>问题讨论</div>
</a>
</li>
<li>
<a class="t4" href="#">男丁格尔</a>
</li>
<li>
<a class="t5" href="#">人材
<div>丁丁是人材</div>
</a>
</li>
<li>
<a class="t6" href="#">格言
<div>好话大家说</div>
</a>
</li>
<li>
<a class="t7" href="http://www.wowgame.tw">WOWGame</a>
</li>
</ul>
</body>
使用 UL 及 LI 来做选单的项目，每一个 LI 中的 A 连结是我们主要的选单内容，而其 DIV 是更进阶的描述内容，若不需要的话则可以不用加。因为我要让每个选单都有不同的背景图，所以还需要帮 A 连结都加一个独立的 class。
然后，我有 7 个 LI 选单项目，因此我还请梅干帮忙准备了 7 张图片(果然还是要专业的来)。接着就能开始动手写 CSS 囉：
