Отвечают ли неупорядоченные списки переходу CSS?

Вот мой JSFiddle. То, что я пытаюсь сделать, - это эффект перехода между двумя неупорядоченными списками. Когда вы нажимаете на магазин, вы переходите к подменю. Когда вы нажимаете магазин в подменю, он возвращает вас в главное меню. Почему он не скользит или не действует? Моя цель - перевести подменю справа налево и перейти к главному меню слева направо. Как я могу сделать эту работу?

<div class="mobile-nav">
    <ul class="main-mobile-menu transition">
        <li class="has-submenu"><a href="#" title="SHOP" data-menu-id="shop">SHOP</a></li>
        <li class="has-submenu"><a href="#" title="BRANDS" data-menu-id="brands">BRANDS</a></li>
        <li><a href="#" title="ABOUT" >ABOUT</a></li>
        <li><a href="#" title="CONTACT" >CONTACT</a></li>
    </ul>
    <ul id="shop-submenu" class="hide transition">
        <li><a href="#" title="SHOP" data-menu-id="main-mobile-menu">SHOP</a></li>
        <li class="has-submenu"><a href="#" title="ACCESSORIES" data-menu-id="accessories">ACCESSORIES</a></li>
        <li class="has-submenu"><a href="#" title="ART" data-menu-id="art">ART</a></li>
        <li class="has-submenu"><a href="#" title="WOMENS" data-menu-id="womens">WOMENS</a></li>
        <li class="has-submenu"><a href="#" title="MENS" data-menu-id="mens">MENS</a></li>
        <li class="has-submenu"><a href="#" title="SHOES" data-menu-id="shoes">SHOES</a></li>
        <li><a href="#" title="GIFT CERTIFICATE">GIFT CERTIFICATE</a></li>
    </ul>
</div>

Это мой CSS:

.mobile-nav{
    position: absolute;
    height: 100%;
    padding: 0px;
    left: 0px;
    top: 0px;
    z-index: 0;
    overflow: hidden;
}

.transition{
    -webkit-transition: none 0.4s ease;
    -moz-transition: none 0.4s ease;
    -ms-transition: none 0.4s ease;
    -o-transition: none 0.4s ease;
    transition: none 0.4s ease;
    -webkit-transition-property: top, right, left, bottom, border;
    -moz-transition-property: top, right, left, bottom, border;
    -ms-transition-property: top, right, left, bottom, border;
    -o-transition-property: top, right, left, bottom, border;
    transition-property: top, right, left, bottom, border;
}

.hide{
    display: none;
}

.open{
    display: block;
}