フローティングカスタマーサービス効果を実現するCSS

<div class="サイドバー">
    <div>
        <div class="tips">オンライン カスタマー サービス</div>
        <ul class="リスト">
            <li>QQ:1846492969</li>
            <li>QQ:1846492969</li>
            <li>QQ:1846492969</li>
            <li>QQ:1846492969</li>
            <li>QQ:1846492969</li>
        </ul>
    </div>
</div>

.サイドバー{
 位置:固定;
 右:-182px;
 上:50px;
 背景色:#ffffff;
 境界線:#eea236 実線 1px;
 遷移:右 0.5秒;
 border:solid 1px 赤;
}
.サイドバー:ホバー{
 右:0;
}
.sideBar>div {
 位置:相対;
}
.サイドバー .ヒント {
 位置:絶対;
 高さ:120px;
 行の高さ:25px;
 背景色:#eea236;
 幅:40px;
 左:-40px;
 上:50px;
 テキスト配置:中央;
 ボックスのサイズ:境界線ボックス;
 パディング:10px 10px;
 左上の境界線の半径:5px;
 左下の境界線の半径:5px;
 フォントの太さ:太字;
 色:#ffffff;
}
.サイドバー .リスト {
 パディング:0;
 リストスタイル:なし;
 幅:180ピクセル;
 マージン:0;
}
.sideBar .list>li {
 パディング:15px;
 border-top:#eea236 破線 1px;
}
.sideBar .list>li:hover {
 背景色:#f0ad4e;
 色:#ffffff;
}
.sideBar .list>li:最初の子 {
 上境界線:なし;
}