本文转载自[主机网] 原文地址：http://www.host.org.cn/css%E7%89%B9%E6%95%88%E8%8F%9C%E5%8D%95%E4%B9%8B%E6%BB%91%E5%8A%A8%E5%9B%BE%E7%89%87.html
今天在网上看到一个特效菜单，效果不错。认真看了源码然后略微修改了一下，自我感觉还不错，简单写个代码分析，分享给大家。
整个菜单用一个UL，每个菜单项就是一个列表项LI，单个菜单项包含两个说明（SPAN）和一个图像（IMAGE）。
设置菜单项 .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
除了利用因为字母来注册域名，其实你也可以直接利用中文来注册域名，IXWebHosting虽然是一个美国公司，但是它也提供了中文域名注册。