Membuat list menjadi lebih indah (lanjutan)

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:

• Tips KomputerBeberapa catatan dan pengalaman pribadi.
  
  Mudah-mudahan ada yang bisa bermanfaat juga buat anda


• Tips HandphoneBeberapa catatan tentang handphone.
  
  Tips pemeliharaan dan semacamnya


• Tutorial MenggambarBeberapa tutorial menggambar.
  
  Sekedar menghilangkan kejenuhan


• Tips BloggerTips 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


• Tips GameRefreshing di dunia fantasy.
  
  Beberapa koleksi tips bermain game yang saya punyai

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>