Kita telah berhasil membuat list menjadi lebih indah dengan menambahkan sedikit kode css. Sekarang kita lanjutkan dengan manfaat CSS tersebut untuk menampilkan efek seperti dibawah:
Yang kita lakukan adalah dengan menambah beberapa kode pada listing kita. Perhatikan listing berikut:
<ul id="submenu">
<li> <a href="http://sexyclimate.blogspot.com/search/label/Tips%20Komputer?&max-results=5"> Tips Komputer<span> Beberapa catatan dan pengalaman pribadi. Mudah-mudahan ada yang bisa bermanfaat juga buat anda</span> </a> </li>
<li> <a href="http://sexyclimate.blogspot.com/search/label/Tips%20Handphone?&max-results=5"> Tips Handphone<span> Beberapa catatan tentang handphone. Tips pemeliharaan dan semacamnya</span> </a> </li>
<li> <a href="http://sexyclimate.blogspot.com/search/label/Tutorial%20Menggambar?&max-results=5"> Tutorial Menggambar<span> Beberapa tutorial menggambar. Sekedar menghilangkan kejenuhan</span> </a> </li>
<li> <a href="http://sexyclimate.blogspot.com/search/label/Tips%20Blogger?&max-results=5"> Tips Blogger<span> Tips mengutak-atik template Blogger. Sebenarnya tidak ada rencana membuat tips ini, tapi karena suka mengutak-atik template blogger tapi sering lupa tips-nya jadi dituliskan disini juga. Mudah-mudahan ada yang bermanfaat buat anda</span> </a> </li>
<li> <a href="http://sexyclimate.blogspot.com/search/label/Tips%20Game?&max-results=5"> Tips Game<span> Refreshing di dunia fantasy.<br /> Beberapa koleksi tips bermain game yang saya punyai</span> </a> </li> </ul>
Perhatikan pada listing diatas kita menambahkan kalimat diapit tag <span> </span> , kalimat itulah yang akan muncul bila kita hover mouse (sorry, belum ketemu kata yang tepat pengganti hover)ke item di listing. Baris pertama akan diperbesar, sehingga perlu kita berikan tag <br /> agar kalimat selanjutnya berada di baris selanjutnya. Misalkan contoh:
<li> <a href="http://sexyclimate.blogspot.com/search/label/Tips%20Game?&max-results=5"> Tips Game<span> Refreshing di dunia fantasy.<br /> Beberapa koleksi tips bermain game yang saya punyai</span> </a> </li> </ul>
