鼠标滑动到网站导航栏时，出现阴影特效。先给出demo地址：http://www.songker.com/Code/htmldemo/NavMenu.html

比较简单，简单讲解下。在导航的a标签上有一个before伪元素，初始为一个透明度为0的变形的阴影，鼠标滑动时候添加一个hover样式。

具体样式代码：

a::before {
    color: #161616;
    content: attr(data-hover);
    position: absolute;
    opacity: 0;
    text-shadow: 0 0 1px rgba(255,255,255,0.3);
    -webkit-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
    -moz-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
    transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    -moz-transition: -moz-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    pointer-events: none;
}
a:hover::before,
a:focus::before {
    -webkit-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
    -moz-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
    transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
    opacity: 1;
}