今天在网上看到一个特效菜单，效果不错。认真看了源码然后略微修改了一下，自我感觉还不错，简单写个代码分析，分享给大家。
整个菜单用一个UL，每个菜单项就是一个列表项LI，单个菜单项包含两个说明（SPAN）和一个图像（IMAGE）。
如下面的代码所示：
1: <ul class="mh-menu">
2: <li>
3: <a href="#">
4: <span>龙年大吉</span>
5: <span></span>
6: </a>
7: <img src="images/1.jpg" alt="image01"/>
8: </li>
9: <!-- ... -->
10: </ul>
设置菜单项 .mh-menu li 为Block同时设置一个背景rgba(255,255,255, 0.8)。当鼠标移动到上面的时候改变背景为rgba(225,239,240, 0.4)
1: .mh-menu li:hover a{
2: background: rgba(225,239,240, 0.4);
3: }
对于描述文字，当鼠标停留的时候也改变其颜色，但是颜色可以是不一样，当然颜色过渡动画时间也可以不一样：
1: .mh-menu li a span:nth-child(2){
2: /*...*/
3: transition: color 0.2s linear;
4: }
5: .mh-menu li:nth-child(1):hover span:nth-child(2){
6: color: #ae3637;
7: }
8: .mh-menu li:nth-child(2):hover span:nth-child(2){
9: color: #c3d243;
10: }
11: .mh-menu li:nth-child(3):hover span:nth-child(2){
12: color: #d38439;
13: }
14: .mh-menu li:nth-child(4):hover span:nth-child(2){
15: color: #8e7463;
16: }
对于图片，我们让其从左到右出现，同时我们设置他的透明度从0到1，这样有一个逐渐出现的动画。
1: .mh-menu li img{
2: position: absolute;
3: z-index: 1;
4: left: 0px;
5: top: 0px;
6: opacity: 0;
7: transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
8: }
9: .mh-menu li:hover img{
10: left: 300px;
11: opacity: 1;
12: }
就这么简单，我们可以完成一个不错的效果。
我做了一个演示（包含源码打包下载）：http://demo.host.org.cn/?id=css_slice_memu
