Jquery chrome和safari的动画设置不正确？

我用CSS3在我的网站上制作了一个：hover的动画——当我在Firefox中运行它时，导航动画非常完美，文本从左边滑入——但是在Chrome和Safari中，它似乎不像Firefox那样做动画。在chrome中，它似乎来自底部

您可以在这里看到i live示例（它是左侧导航）：

用于导航的HTML是：

        <div class="left-navigation fixed">
        <nav class="left">
            <ul id="nav">
                <li class="li-blue">
                    <div class="border-left"></div>
                    <a href="#page1" class="left-link nav-blue" data-page="page1">
                        <div class="nav-icon"><img src="assets/css/boerne-img/menu/icon-blue.png" alt="" title="" /></div>
                        <span class="nav-text">Myanmar</span>
                    </a>
                </li>
                <li class="li-darkred">
                    <div class="border-left"></div>
                    <a href="#page2" class="left-link nav-darkred" data-page="page2">
                        <div class="nav-icon"><img src="assets/css/boerne-img/menu/icon-darkred.png" alt="" title="" /></div>
                        <span class="nav-text">Storbyen</span>
                    </a>
                </li>
                <li class="li-orange">
                    <div class="border-left"></div>
                    <a href="#page3" class="left-link nav-orange" data-page="page3">
                        <div class="nav-icon"><img src="assets/css/boerne-img/menu/icon-orange.png" alt="" title="" /></div>
                        <span class="nav-text">Skolen</span>
                    </a>
                </li>
                <li class="li-purple">
                    <div class="border-left"></div>
                    <a href="#page4" class="left-link nav-purple" data-page="page4">
                        <div class="nav-icon"><img src="assets/css/boerne-img/menu/icon-purple.png" alt="" title="" /></div>
                        <span class="nav-text">Klostre & Munke</span>
                    </a>
                </li>
                <li class="li-green">
                    <div class="border-left"></div>
                    <a href="#page5" class="left-link nav-green" data-page="page5">
                        <div class="nav-icon"><img src="assets/css/boerne-img/menu/icon-green.png" alt="" title="" /></div>
                        <span class="nav-text">Landsbyen</span>
                    </a>
                </li>
                <li class="li-brown">
                    <div class="border-left"></div>
                    <a href="#page6" class="left-link nav-brown" data-page="page6">
                        <div class="nav-icon"><img src="assets/css/boerne-img/menu/icon-brown.png" alt="" title="" /></div>
                        <span class="nav-text">Floden</span>
                    </a>
                </li>
                <li class="li-red">
                    <div class="border-left"></div>
                    <a href="#page7" class="left-link nav-red" data-page="page7">
                        <div class="nav-icon"><img src="assets/css/boerne-img/menu/icon-red.png" alt="" title="" /></div>
                        <span class="nav-text">Din hjælp</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>

.left-navigation { width: auto; }   
.left-navigation h2 { background: transparent url(img/left-menu-h2.png) repeat-x; box-shadow: 0 3px 5px 0px #444; font-size:11px !important; padding: 7px 10px; display:inline-block; text-transform:uppercase; color:#FFF; margin-bottom:4px;  }
.left-navigation.fixed { z-index:1000; position:fixed; left:0; top:20%;}    
.left-navigation ul { margin-bottom:40px !important;}
.left-navigation ul,
.left-navigation ul li{ padding:0; margin:0; list-style:none; font-weight:bold;}

    .left-navigation ul li { 
        background: transparent url(boerne-img/menu/bg-li.png) top right no-repeat; 
        margin-bottom:-10px; 
        display:table; 
        position:relative; 
        width:auto; 
        overflow:hidden; 
        height:55px; 
        padding: 0 20px 0 10px; 
        -webkit-transition: width .3s ease-in-out;
        -moz-transition: width .3s ease-in-out;
        -o-transition: width .3s ease-in-out;
        transition: width .3s ease-in-out;
    }

    .left-navigation ul li:not(.current) {
        width:35px; 
        display:block;
        min-width:35px !important;
    }

    .left-navigation ul li:hover { 
        min-width:35px !important;
        width:auto;
        -webkit-transition: width .3s ease-in-out;
        -moz-transition: width .3s ease-in-out;
        -o-transition: width .3s ease-in-out;
        transition: width .3s ease-in-out;
    }

    .left-navigation ul li a,
    .left-navigation ul li a:hover{ text-decoration:none;}

    .left-navigation ul li span.nav-text { /*display:inline-block;*/ position:relative; left:-250px; z-index:1; }
    .left-navigation ul li:hover span.nav-text { left:0;}
    .left-navigation ul li.current span.nav-text { left:0;}
    .left-navigation ul li:hover span.nav-text,
    .left-navigation ul li.current span.nav-text{ padding-left:10px; color:#000; }

    .left-navigation ul li .nav-icon { padding: 9px 0 0 0; display:inline-block; position:relative; z-index:2;}
    .left-navigation ul li a.nav-blue .nav-icon { padding: 8px 0 0 0; }

    /* Safari Hack */
    html[xmlns*=""]:root .left-navigation ul li:hover { width:100% !important;}
    *|html[xmlns*=""] .left-navigation ul li:hover { width:100% !important;}

    /* Border styles for left-nav */ 
    .left-navigation ul li.li-blue .border-left {
        border-left: 5px solid #004C73;
        display: inline-block;
        height: 45px;
        margin-left: -10px;
        margin-top: 5px;
        float:left;
    }
    .left-navigation ul li.li-darkred .border-left {
        border-left: 5px solid #750809;
        display: inline-block;
        height: 45px;
        margin-left: -10px;
        margin-top: 5px;
        float:left;
    }
    .left-navigation ul li.li-orange .border-left {
        border-left: 5px solid #dc5928;
        display: inline-block;
        height: 45px;
        margin-left: -10px;
        margin-top: 5px;
        float:left;
    }
    .left-navigation ul li.li-purple .border-left {
        border-left: 5px solid #d89fbc;
        display: inline-block;
        height: 45px;
        margin-left: -10px;
        margin-top: 5px;
        float:left;
    }
    .left-navigation ul li.li-green .border-left {
        border-left: 5px solid #a5cd41;
        display: inline-block;
        height: 45px;
        margin-left: -10px;
        margin-top: 5px;
        float:left;
    }
    .left-navigation ul li.li-brown .border-left {
        border-left: 5px solid #ae8f48;
        display: inline-block;
        height: 45px;
        margin-left: -10px;
        margin-top: 5px;
        float:left;
    }
    .left-navigation ul li.li-red .border-left {
        border-left: 5px solid #f03307;
        display: inline-block;
        height: 45px;
        margin-left: -10px;
        margin-top: 5px;
        float:left;
    }

明白了

在

左侧导航ul li中

将宽度：35px元素更改为

最大宽度：35px
并在
中。左导航ul li:悬停
将
宽度：自动
更改为
最大宽度：500px

这将起作用
几乎起作用-但是，li:hover的宽度不应该是150px，而不是特定的宽度，它应该是if悬停时元素的宽度，这是不同的，取决于
尝试删除
位置：relative在
中。左导航ul li span.导航文本