右侧固定导航栏

实现效果：固定导航栏的高度为整个屏幕高度；

实现二级导航在鼠标放在相应文字板块，从右往左出现，

鼠标移开，子导航从左往右消失（把导航栏固定在左侧，不用改js代码，也是从左往右出现，从右往左消失）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-3.1.1.min.js"></script>
    <style>
        *{
            text-decoration: none;
            color: black;
        }
        .right_nav {
             70px;
            height: 100%;
            background-color: lightpink;
            position: fixed;
            top: 0;
            right: 1px;
            z-index: 3;

        }
        .right_nav .a,.aa{

            height: 40px;
            line-height: 30px;
            text-align: center;
            margin:0;
            padding: 0;
            margin-bottom: 10px;
            position: relative;
            top:25%;
            border: 1px solid mediumpurple;


        }
        .a:hover,.aa:hover {
            background:  mediumpurple;
        }
        .account {
            100px ;
            height: 30px;
            position: absolute;
            right: 69px;
            top:10px;
            border: 1px solid mediumpurple;
            display: none;
        }
        .buy {
            150px ;
            height: 30px;
            position: absolute;
            border: 1px solid mediumpurple;
            right: 69px;
            top:7px;
            display: none;

        }
        
    </style>
</head>
<body>
<div class="right_nav">
    <div class="a">账号
        <div class="account ">
            哟哟没账号
        </div></div>
    <div  class="a">购物车
        <div class="buy">去找孙空空辣</div>
    </div>
    <div  class="aa"><a href="#top" >to top</a></div>
</div>

<script>
$(".a").hover(function () {
$(this).children().animate({ 'toggle'});
})
</script>
</body>
</html>