Optimasi CSS + Lists Full Style

Enggak banyak ngomong buat sobat satu ini. Artikelnya sangat berguna bagi kalian yang mencari inspirasi. Coba tengok kesini lihat mengenai lists cheat sheets 145 Useful cheat sheets for some of the most widely used tools on the web :-bd
Edan banget buat optimasi CSS kita tuh. Segala format dibeberkan disana. Silahkan diacak-acak saja oleh sobat. Untuk bonusnya koben membuat sebuah lists content bila disorot cursor akan tampak isinya menjulur ke bawah :D Siapa tauk ada yang mau pakai untuk meyimpan link teman² tercintanya :x :"> Metodenya mudah saja Add a Gadget ► HTML/JavaScript

<style>
#List-cool{position: fixed;left: 0;top: 0;}
ul.List-menu ul{position: absolute;display: none;list-style: none;width: 100%;padding: 0;margin: 0;border: 1px solid #555;}
#List-selector ul.List-menu li.List-item{display: none;}
ul.List-menu li{margin: 0;padding: 0;display: block;float: left;width: 100%;}
ul.List-menu li.List-item{float: left;display: block!important;}
ul.List-menu li:hover ul{display: block!important;margin-top: 3px;}
ul.List-menu li .Trigger-link .List-link{display: inline-block;}
ul.List-menu a.Trigger-link{display: block;padding: 0;text-decoration: none;font-size: 15px;color: #000;cursor: pointer;}
a.List-link{display: block; padding: 7px 7px;text-decoration: none;font-size: 15px;line-height: 12px;color: #000;cursor: pointer;}
ul.List-menu li li a{background-color: #999;}
ul.List-menu li li a:hover{background-color: #777;color: #fff;}
span.List-judul{font-weight: bold;color: #333;border: 1px solid #555;padding: 5px 15px;background-color: #999;}
</style>

<div id="List-cool">
<div id="List-selector">
<ul class="List-menu">
<li class="List-item"><a class="Trigger-link"><span class="List-judul">List My Friend</span></a>
<ul style="height: 250px;overflow-y: scroll;width: 155px;display: none">
<li class="List-item"><a href="" class="List-link">Enoq</a>
</li>
<li class="List-item"><a href="" class="List-link">Wati</a>
</li>
<li class="List-item"><a href="" class="List-link">Tukimin</a>
</li>
<li class="List-item"><a href="" class="List-link">Tukieum</a>
</li>
<li class="List-item"><a href="" class="List-link">Juminten</a>
</li>
<li class="List-item"><a href="" class="List-link">Qodir</a>
</li>
<li class="List-item"><a href="" class="List-link">Maesaroh</a>
</li>
<li class="List-item"><a href="" class="List-link">Wagiman</a>
</li>
<li class="List-item"><a href="" class="List-link">Bejo</a>
</li>
<li class="List-item"><a href="" class="List-link">Tresno</a>
</li>
<li class="List-item"><a href="" class="List-link">Dadang</a>
</li>
<li class="List-item"><a href="" class="List-link">Endang</a>
</li>
</ul>
</li>
</ul>
</div>
</div>

Save dan lihat gimana hasilnya sok ;)) Semoga bermanfaat :)
Happy blogging \m/