CSS zur Erzielung eines schwebenden Kundenservice-Effekts

<div Klasse="Seitenleiste">
    <div>
        <div class="tips">Online-Kundenservice</div>
        <ul Klasse="Liste">
            <li>QQ:1846492969</li>
            <li>QQ:1846492969</li>
            <li>QQ:1846492969</li>
            <li>QQ:1846492969</li>
            <li>QQ:1846492969</li>
        </ul>
    </div>
</div>

.sideBar {
 Position: fest;
 rechts: -182px;
 oben: 50px;
 Hintergrundfarbe: #ffffff;
 Rand: #eea236 durchgezogen 1px;
 Übergang: rechts 0,5 s;
 Rand: durchgehend 1 Pixel rot;
}
.sideBar:hover {
 rechts:0;
}
.sideBar>div {
 Position: relativ;
}
.sideBar .tipps {
 Position: absolut;
 Höhe: 120px;
 Zeilenhöhe: 25px;
 Hintergrundfarbe: #eea236;
 Breite: 40px;
 links: -40px;
 oben: 50px;
 Textausrichtung: zentriert;
 Boxgröße: Rahmenbox;
 Polsterung: 10px 10px;
 Rahmen oben links, Radius: 5px;
 Rahmen unten links, Radius: 5px;
 Schriftstärke: fett;
 Farbe: #ffffff;
}
.Seitenleiste .Liste {
 Polsterung: 0;
 Listenstil: keiner;
 Breite: 180px;
 Rand: 0;
}
.sideBar .list>li {
 Polsterung: 15px;
 Rahmen oben: #eea236 gestrichelt 1px;
}
.sideBar .list>li:hover {
 Hintergrundfarbe: #f0ad4e;
 Farbe: #ffffff;
}
.sideBar .list>li:erstes-Kind {
 Rahmen oben: keine;
}