本文主要包含css3下拉菜单,css3下拉框,html5 css3下拉菜单,css3下拉菜单代码,css3下拉列表等相关知识,佚名 希望在学习及工作中可以帮助到您
下拉菜单
先直接来看效果是怎样:
当鼠标移到选单之后,下方会展开并有其它说明内容,我这边是把展开的部份加上图片内容,让它有其它不同的变化。因为这样的动作就像人家庙会时会有舞狮从嘴里丢下贺联一样,所以我才取名为"贺联式选单"。
这样的效果其实只需要 HTML 及 CSS 配合就能做出来了,我们先来看 HTML 的部份:
检视原始码 HTML
- <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>