Unordered List Hover Style

Trik kali ini yaitu mengenai merombak gaya unordered list (ul) Tauk dong fitur satu ini , bahasa HTML dalam membuat list HTML ul tag. Sobat kita Mohammad Mustafa Ahmedzai pernah mengangkat trick ini juga dengan judul Customize Bullet List Style With Image Hover Effect In Blogger!
Sekarang sedikit mengembangkan dengan menanamkan kode hover effect display none, dimana judul (tulisan inti) akan terlihat, isi dari paragraf akan muncul jika cursor diarahkan ke judul :D Keterangannya membingungkan yak sob ;)) Buka web master berikut David Walsh, lalu perhatikan sisi kanan yg bertuliskan Poetic Posts! Sorot deh ;) Screenshot:

Begitu teman-teman, keliatan kan saat disorot dan tidak isi kontennya :P Bumbu ajaib yg dibutuhkan murni CSS3

#ul-list {
list-style-type:none;
padding:0; margin:0;
}
#ul-list a {
display:block;
padding:0;
text-decoration:none !important;
margin:0;
position:relative;
z-index:1;
}
#ul-list a:hover {
background:#ffffee;
}
#ul-list h3 {
color:#333;
font-style:normal;
}
#ul-list p {
color:#555;
font-size:15px;
padding:0;
font-family:arial;
display:none;
}
#ul-list .more {
display:none;
}
#ul-list a:hover h3 {
color:#a00;
}
#ul-list a:hover p {
color:#000;
display:block;
}
#ul-list a .arrow {
width:0px;
height:0px;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid #f00;
margin:0 auto;
font-size:0px;
line-height:0px;
position:absolute;
top:10px;
right:10px;
}
#ul-list a:hover .arrow {
display:none;
}
#ul-list a:hover .more  {
display:block;
position:absolute;
bottom:10px;
right:1px;
color:#365c84;
font-family:arial;
-webkit-border-radius:5px;
-moz-border-radius:5px;
background:#FFCC00;
color:#f00;
padding:2px 5px;
display:inline-block;
font-size:65%;
-webkit-transform:rotate(-20deg);
-moz-transform:rotate(-20deg);
}
#ul-list a:hover .more:hover {
background:#183155;
color:#c4d7ef;
}

Untuk kode CSS h3 kalau sobat sudah ada ditemplate tidak usah dipakai lagi ;) Menggunakannya ketika memosting nih sedkit perlu kejelian b-)

<ul id="ul-list">
<li><a href="#">
<span class="arrow"></span>
<span class="more">Learn more!</span>
<h3>Getting Started with dojox.mobile</h3>
<p>Fu ma'n Noper bléit rem, méngem ugedon mir hu. De Monn grouss d'Kàchen den, d'Beem sëtzen do mir, bei d'Wise klinzecht op. Nei geet eise kréien et, ké stét d'Hiezer däischter dan. Sin Fielse d'wäiss grousse vu, Hämmel meescht d'Blumme hu zum. Rem am Monn riede, op och Stret méngem iweral, ma'n iw'rem d'Margréitchen do gin. Ech ké ma'n d'Land, sech fort si gei. Blo an eise dann däischter. Wa wéi durch néierens. Am Bass Duerf heemlech net. Zum ké Noper éiweg, gutt rout d'Musek no rëm, d'Natur d'Liewen Gesträich vu sin. Den ménger Keppchen rëschten wa, dé gei Mier</p>
</a>
</li>
<li><a href="#">
<span class="arrow"></span>
<span class="more">Learn more!</span>
<h3>Automate your Projects with Apache Ant</h3>
<p>Lorem ipsum vix id kasd adhuc dignissim, eum ad dico audire mediocritatem, te iisque tritani efficiendi has. Ne quo justo docendi. Cum ea quando placerat, eirmod latine erroribus mei ei, quo mazim appetere et. Munere aliquid vis ea. Te congue ullamcorper per. Dicat dolores eu duo. Quas labitur volumus te duo, at per sonet detraxit evertitur. No nonumy percipit voluptatum vel, alii erant mediocritatem sed at. Brute aeque deseruisse mei ex, invidunt constituto usu te, sea te delectus urbanitas interpretaris. Eu ullum ubique eum, id aliquid mediocrem quo. Nam ne eius debitis. Vis porro labitur laboramus an. Utamur electram voluptatum.</p>
</a>
</li>
<li><a href="#">
<span class="arrow"></span>
<span class="more">Learn more!</span>
<h3>Designing for iOS: Life Beyond Media Queries</h3>
<p>Sed da sine vocabulario, il magazines interlinguistica web. Al duo tote synonymo finalmente. Ma ille toto del, ha durante synonymo uso. Le peano vices non, duo libere technic articulo in. Sine paternoster simplificate su non, anglese moderne secundo da web. Non message linguistas al, non nomine capital primarimente su. Effortio linguistic litteratura o que, pro lingua auxiliar su. Pote basate programma il nos. Non ha responder appellate traduction, es que lista celos. Con sitos complete americas le, libro excellente pan de, latente philologos conferentias pan se. Infra esseva uso ma. Involvite anglo-romanic ma que, debitas internet primarimente il web. Uso</p>
</a>
</li>
</ul>

Good luck
Happy unordered list \m/