网站右侧通用悬浮组件

HTML:

<link rel="stylesheet" href="http://at.alicdn.com/t/font_2552256_h2xmhqamonw.css">
<div class="xf">
    <ul>
        <li>
            <a href="#">
                <i class="iconfont icon-duihua"></i>
                <p>在线咨询</p>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <i class="iconfont icon-weixin"></i>
                <p>微信联系</p>
            </a>
            <div uk-dropdown="pos:left-center" class="weixin_sub">
                <img src="images/ewm01.png" alt="" style="width: 110px;">
            </div>
        </li>
        <li>
            <a href="#">
                <i class="iconfont icon-baojia"></i>
                <p>索取报价</p>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <i class="iconfont icon-dianhua"></i>
                <p>联系电话</p>
            </a>
            <div uk-dropdown="pos:left-center" class="tel_sub">
                <div class="xf_tel">400-500-1234</div>
            </div>
        </li>
        <li>
            <a href="{url id=sitemap /}">
                <i class="iconfont icon-ditu"></i>
                <p>网站地图</p>
            </a>
        </li>
        <li>
            <a href="#" uk-scroll>
                <i class="iconfont icon-fanhuidingbu"></i>
                <p>返回顶部</p>
            </a>
        </li>
    </ul>
</div>

CSS代码：

/** 悬浮按钮 **/
.xf{
    position: fixed;
    top: 15%;
    right: 0;
    z-index: 100;
    ul{
        margin: 0;
        padding: 0;
        li{
            list-style: none;
            text-align: center;
            a{
                display: block;
                background-color: #FE0000;
                color: #fff;
                padding:4px 10px;
                &:hover{
                    text-decoration: none;
                    background-color: #c30404;
                }
            }
            i{
                font-size: 30px;
            }
            p{
                font-size: 14px;
                text-align: center;
                margin: 0;
            }
        }
    }
    .weixin_sub{
        min-width: 120px;
        max-width: 120px;
        padding: 5px;
        box-shadow: none;
        &::after{
            content: "";
            width: 0;
            height: 0;
            border-top: 10px solid transparent;
            border-left: 16px solid #fff;
            border-bottom: 10px solid transparent;
            position: absolute;
            right: -10px;
            top: 50%;
            transform: translateY(-50%);
        }
    }
    .tel_sub{
        min-width: 200px;
        max-width: 200px;
        padding: 5px;
        box-shadow: none;
        background-color: #c30404;
        color: #fff;
        font-weight: bold;
        font-size: 24px;
        &::after{
            content: "";
            width: 0;
            height: 0;
            border-top: 10px solid transparent;
            border-left: 16px solid #c30404;
            border-bottom: 10px solid transparent;
            position: absolute;
            right: -10px;
            top: 50%;
            transform: translateY(-50%);
        }
    }
}