CSS3怎么制作下拉菜单及弹起式选单

这篇文章主要介绍“CSS3怎么制作下拉菜单及弹起式选单”，在日常操作中，相信很多人在CSS3怎么制作下拉菜单及弹起式选单问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS3怎么制作下拉菜单及弹起式选单”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

10年积累的网站设计、成都做网站经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计后付款的网站建设流程，更有洱源免费网站建设让你可以放心的选择与我们合作。

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

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

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

XML/HTML Code复制内容到剪贴板

1.   

2.  

     

   •   

   •   

   •    梅干桑   

   •     

     自我介绍
       

   •      

   •   

     

   •   

   •   

   •    Photoshop   

   •     

     上课囉!!
       

   •      

   •   

     

   •   

   •   

   •    Q ＆ A   

   •     

     问题讨论
       

   •      

   •   

     

   •   

   •   

   •    男丁格尔  

   •   

     

   •   

   •   

   •    人材   

   •     

     丁丁是人材
       

   •      

   •   

     

   •   

   •   

   •    格言   

   •     

     好话大家说
       

   •      

   •   

     

   •   

   •   

   •    WOWGame  

   •   

     

   •  

     

3.   

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

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

CSS Code复制内容到剪贴板

1. ul {   

2.  margin: 0;   

3.  padding: 0;   

4.  list-style: none;   

5. }   

6.     

7. ul li {   

8.  float: left;   

9. }   

10.     

11. ul li a {   

12.  width: 100px;   

13.  height: 50px;   

14.  display: block;   

15.  line-height: 50px;   

16.  overflow: hidden;   

17.  text-align: center;   

18.  text-decoration: none;   

19.  color: #fff;   

20. }   

21.     

22. ul li a:hover {   

23.  height: 150px;   

24. }   

25.     

26. ul li a div {   

27.  color: #fff;   

28.  line-height: 16px;   

29.  font-weight: bold;   

30.  margin-top: 73px;   

31.  padding-top: 7px;   

32.  border-top: 1px dotted #fff;   

33. }   

34.     

35. .t1 { background: #08f2d6 url(01.gif); }   

36. .t2 { background: #1209f1 url(02.gif); }   

37. .t3 { background: #a202e2 url(03.gif); }   

38. .t4 { background: #f4e603 url(04.gif); }   

39. .t5 { background: #55df07 url(05.gif); }   

40. .t6 { background: #02a8f3 url(06.gif); }   

41. .t7 { background: #f6025e url(07.gif); }  

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

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

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

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

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

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

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

检视原始码 HTML

XML/HTML Code复制内容到剪贴板

1.   

2.    

3.   

4. 首页
  

5.   

6. 购物车
  

7.   

8. 推荐商品
  

9.   

10. 订单查询
  

11.    

12.   

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

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

CSS Code复制内容到剪贴板

1. #menu {   

2.  margin: 20px 0 0;   

3.  padding: 0;   

4.  height: 62px;  /* 选单图片的高 */  

5.  list-style: none;   

6.  overflow: hidden;   

7.  width: 432px;  /* 98 * 4 + 5 * 8 */  

8.  border-bottom: 1px solid #ccc;   

9. }   

10. #menu li {   

11.  float: left;   

12.  padding: 0 5px;   

13. }   

14. #menu li a {   

15.  display: block;   

16.  width: 98px;  /* 选单图片的宽 */  

17.  height: 62px;  /* 选单图片的高 */  

18.  line-height: 62px; /* ie suck */  

19.  text-indent: -9999px;   

20.  margin-top: 31px; /* 需要设定为图片宽/2 */  

21.  background-repeat: no-repeat;   

22. }   

23. #menu li a:hover {   

24.  margin-top: 1px; /* 当鼠标移到选单上时... */  

25. }   

26. /* 帮每一个 A 连结都加入不同选单图片 */  

27. .home {background:url(home.gif);}   

28. .car {background:url(car.gif);}   

29. .good {background:url(good.gif);}   

30. .query {background:url(query.gif);}  

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

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

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

到此，关于“CSS3怎么制作下拉菜单及弹起式选单”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！