现在很多博客导航都很酷，优站网在这里将分享两个特殊效果教程，鼠标放在导航菜单上。效果很爽，朋友可以自己体验。
特效
一:设置
背景→外观→菜单，点击右上角“显示选项”，勾选模块属性下的所有选项，显示高级菜单。
第二部分:法典
选择导航菜单(主菜单)
1.修改导航菜单:本网站主页
导航标签添加代码:
<i class="fa-home fa"></i> <span class="font-text">首页</span>
CSS类添加代码：
cddh cddh1 wow animated
2.修改导航菜单：99八十一
导航标签添加代码：（同首页）
CSS类添加代码：
cddh wow animated cddh2
3.修改导航菜单：资源分享
导航标签添加代码：（同首页）
CSS类添加代码：
cddh wow animated cddh3
之后导航菜单依次类推。
css代码
将以下代码添加到style.css文件中：
.down-menu>.current-menu-item>a:hover{animation-duration:.8s;animation-name:fadeInUp;background:#c40000 none repeat scroll 0 0;color:#fff!important}@keyframes fushang{0%{opacity:0;transform:translateY(-300px)}10%{opacity:0}100%{opacity:1;transform:translateY(0)}}
.fushang{animation-name:fushang}
.cddh{animation-name:fushang;z-index:5}
.cddh1{animation-duration:.7s}
.cddh2{animation-duration:.8s}
.cddh3{animation-duration:1s}
.cddh4{animation-duration:1.1s}
.cddh5{animation-duration:1.2s}
.cddh6{animation-duration:1.3s}
.cddh7{animation-duration:.5s;animation-name:fushang}
请根据您的导航菜单修改相应的代码。
效果:打开主页导航时，会从顶部依次落到导航位置，鼠标经过时会出现浮动效果。具体效果请抛去自己的经验。
特效二
#site-nav .down-menu>li>a:hover{height:88px;border-bottom:88px solid #b485e2}
#site-nav .down-menu a{height:88px;line-height:88px;border-bottom:0 solid #b485e2;transition-duration:.6s}
效果：鼠标经过会出现背景色，并且有颜色上浮特效。具体效果请自行折腾体验。
