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

CSS Code复制内容到剪贴板

ul {   
 margin: 0;   
 padding: 0;   
 list-style: none;   
}   
    
ul li {   
 float: left;   
}   
    
ul li a {   
 width: 100px;   
 height: 50px;   
 display: block;   
 line-height: 50px;   
 overflow: hidden;   
 text-align: center;   
 text-decoration: none;   
 color: #fff;   
}   
    
ul li a:hover {   
 height: 150px;   
}   
    
ul li a div {   
 color: #fff;   
 line-height: 16px;   
 font-weight: bold;   
 margin-top: 73px;   
 padding-top: 7px;   
 border-top: 1px dotted #fff;   
}   
    
.t1 { background: #08f2d6 url(01.gif); }   
.t2 { background: #1209f1 url(02.gif); }   
.t3 { background: #a202e2 url(03.gif); }   
.t4 { background: #f4e603 url(04.gif); }   
.t5 { background: #55df07 url(05.gif); }   
.t6 { background: #02a8f3 url(06.gif); }   
.t7 { background: #f6025e url(07.gif); }  

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

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

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

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

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

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