右侧悬浮导航

右侧悬浮导航
实现效果

前端代码

<div class="sidenav">
        <ul>
            <li><a><span class="bg"></span><span>京东秒杀</span></a></li>
            <li><a><span class="bg"></span><span>特色优选</span></a></li>
            <li><a><span class="bg"></span><span>频道广场</span></a></li>
            <li><a><span class="bg"></span><span>为你推荐</span></a></li>
            <li><a><span class="bg"></span><img src="../img/img1.png" /><span> 客服</span></a></li>
            <li><a><span class="bg"></span><span>反馈</span></a></li>
            <li><a><span class="bg"></span><span>顶部</span></a></li>
        </ul>
    </div>

样式代码

<style>
        body {
            background: #eee;
        }

        ul, li {
            margin: 0;
            padding: 0;
        }

        .sidenav {
            position: relative;
        }

            .sidenav > ul {
                background: #fff;
                position: fixed;
                top: 100px;
                right: 50px;
                width: 60px;
            }

                .sidenav > ul > li {
                    list-style: none;
                    width: 58px;
                    height: 60px;
                }


                    .sidenav > ul > li > a {
                        display: block;
                        width: 28px;
                        height: 38px;
                        font-size: 14px;
                        padding: 10px 16px;
                        position: relative;
                    }

                        .sidenav > ul > li > a::after {
                            position: absolute;
                            width: 40px;
                            height: 1px;
                            bottom: 1px;
                            left: 50%;
                            margin-left: -20px;
                            content: "";
                            background: linear-gradient(270deg, white, rgb(238, 238, 238), rgb(238, 238, 238), white);;
                            z-index: 1;
                        }

                        .sidenav > ul > li > a > .bg {
                            position: absolute;                           
                            top: -1px;
                            bottom: 1px;
                            left: 0;
                            right: 0;
                            background: transparent;
                            z-index: 2;
                        }

                    .sidenav > ul > li:hover > a > .bg {
                        background: #0094ff;
                    }
                    .sidenav > ul > li > a >img {
                    display:block;
                    width:18px;
                    height:16px;
                    margin:0 auto;
                    position:relative;
                    z-index:3;
                    }
                    .sidenav > ul > li > a > span:last-child {
                       position:relative;
                       z-index:3;
                    }
    </style>