导航栏不能使用CSS3的过渡问题

项目场景：

在项目中我们经常会把页面做的更与用户有交互感，而且随着科技发展网页也做得非常炫酷，就比如一个导航栏就有不同的效果。

例：

如上这个导航栏在我们鼠标hover上去时，上面的汉字和下面的英文会发生换位，还有二级导航出现等等。
例：

这时我们首先想到的是使用CSS3中的过渡，毕竟能少很多代码敲写。

---

问题描述：

当我们在使用CSS3中的过渡时，你会发现我们的代码没有问题，但是导航栏中鼠标hover上去却没有我想要的效果，两行文字不会发生改变。

<header class="header">
    <i></i>
    <div class="logo"><h1><a href="javascript:;" title="渝中区今尚古百年婚纱影楼"></a></h1></div>
    <nav class="nav">
        <ul class="clearfix" style="padding: 0px">
            <li class=""><a href="javascript:;"><b style="top: 0px;">网站首页</b><span style="top: 0px;">HOME</span></a></li>
            <li ><a href="javascript:;" ><b style="top: 0px;">最新活动</b><span style="top: 0px;">ACTIVTY</span></a></li>
            <li ><a href="javascript:;"><b style="top: 0px;"> 口碑力量</b><span style="top: 0px;">MOUTH</span></a></li>
            <li ><a href="javascript:;"><b style="top: 0px;">关于我们</b><span style="top: 0px;">ABOUT</span></a>
                <ul>
                    <li><a href="javascript:;">品牌介绍</a></li>
                    <li><a href="javascript:;">联系我们</a></li>
                </ul>
            </li>
       </ul>
 </header>
 //css
 .nav ul li b{
    font-weight: normal;
    font-size: 16px;
    margin: 21px 0 5px;
    display: block;
    position: relative;
    transition: top  1s; 
}
.nav ul li span{
    line-height: 12px;
    display: block;
    font-weight: normal;
    cursor: pointer;
    position: relative;
    color: #c5c9cb;
    font-family: sans-serif;
    font-size:12px;
    transform: scale(0.833333);
    transition: top  1s; 
}
 .nav ul li a:hover b{top: 17px}
 .nav ul li a:hover span{top: -24px}

---

原因分析：

我们在练习CSS3的过渡时时用的div标签，div标签本就是一个块级标签，所以没出想什么bug，
如：

<div class="nav">
        <div class="clearfix">
            <p class="two">网站首页</p>
            <p class="three">HOME</p>
        </div>
    </div>
    <style>
        .nav{
            width: 150px;
            height: 100px;
            color: #fff;
            border:chartreuse 1px solid ;
        }
        .clearfix{
            width: 100%;
            height: 40px;
        }
        .two{
            color: #fff;
            text-align: center;
            position: relative;
            top: 0;
            transition: top  1s;
        }
        .three{
            color: #fff;
            text-align: center;position: relative;
            top: 0;
            transition: top  1s;
        }
        .nav:hover .two{
            top: 17px;
        }
        .nav:hover .three{
            top: -50px;
        }

而当我在实际开发中通常会使用的方式如下：

 <li class=""><a href="javascript:;"><b style="top: 0px;">网站首页</b><span style="top: 0px;">HOME</span></a></li>

我们使用a标签、b标签、span标签等，这些都要通过display：block；变换为块级标签，但是往往还是不能达到预期效果。

---

解决方案：

最好的解决办法就是JavaScript脚本！

// hover事件 字体调换位置
$(".nav>ul>li").hover(function () {

    $(this).addClass("sfhover");
    $(this).find("a:first b").animate({"top": "17px"}, "fast");
    $(this).find("span").animate({"top": "-24px"}, "fast");
    if (!$(this).find("ul").is(":animated")) $(this).find("ul").slideDown("fast")
},
function () {

    $(this).removeClass("sfhover");
    $(this).find("a:first b").animate({"top": "0px"}, "fast");
    $(this).find("span").animate({"top": "0px"}, "fast");
    $(".nav ul ul").slideUp("fast")
    if (!$(this).find("ul").is(":animated")) $(this).find("ul").slideUp("fast");

})

这是一点不成熟建议，希望能给你帮助。你有更好方法欢迎指导。