Membuat: Menu Navigasi Sederhana Tanpa Menggunakan <li>

Tadinya Saya akan posting meneruskan masalah Kemarin (perbedaan website dan blog //yang belum berkomentar silahkan, karena pendapat kalian nanti akan dibandingkan di posting selanjutnya//), tapi karena ada kepentingan lain (tugas tugas tugas) jadinya saya akan membahas tentang menu navigasi. Ide ini saya dapat dari teman-teman yang suka ngobrol di tempat chat (tempat nongkrongnya para blogger).
Langsung saja.
Sudah tahu apa itu menu navigasi?, jika belum coba liat gambar ini:

Inilah menu navigasi

Sebenarnya banyak sekali script/ kode yang menjelaskan tentang pembuatan navigasi. Kode yang digunakan biasanya menggunakan tag <li> (singkatan dari list). Padahal sebenarnya <li> akan lebih optimal penggunaannya jika kita mau membuat menu navigasi drop down.
Kekurangan dari kode navigasi menggunakan <li> adalah script yang dipakai sangatlah panjang dibandingkan dengan tidak menggunakan <li> (perbedaannya sekitar 25%). Walaupun tidak begitu berpengaruh dalam hal kecepatan loading blog, tapi alangkah lebih bagusnya kita menggunakan script yang lebih sederhana. Dalam hal ini saya juga lebih suka yang sederhana dan berefek sangat baik.
"Bagaimana membuatnya?"
Lets go... kita mulai sekarang.

Untuk Kode CSS:

#mnatas{background:#6F0;font-size:13px;font-style:Arial;font-weight:700;height:27px;width:100%}
#mnatas ul{float:left;height:27px;line-height:1.9em;list-style:none;margin:0;padding:0;text-align:center;width:129px}
#mnatas ul a{color:#C30;padding-top:3px}
#mnatas ul a:hover{background:#fff;color:#000;display:block;height:27px;margin:0;padding:0;text-decoration:blink}

Cari kode ]]></b:skin> ( untuk memudahkan pencarian, silahkan tekan ctrl+f ) Simpan kode diatas (yang ada didalam kotak hijau) di atas kode  ]]></b:skin>
Tambahan:
Jika anda mau mengganti background menu, silahkan ganti kode yang warna biru (#6F0).
Jika mau mengganti warna tulisan menunya, ganti kode warna hijau (#C30)
Untuk kode warna silahkan anda pilih disini

Untuk kode HTML

 <div id="mnatas">
<ul><a href="http://congcot.co.cc/">Menu1</a></ul>
<ul><a href="http://congcot.co.cc/">Menu2</a></ul>
<ul><a href="http://congcot.co.cc/">Menu3</a></ul>
<ul><a href="http://congcot.co.cc/">Menu4</a></ul>
<ul><a href="http://congcot.co.cc/">Menu5</a></ul>
</div>

Cari kode <div id='content-wrapper'> dan simpan kode diatas (didalam kotak hijau) di atas kode <div id='content-wrapper'>
Tambahan:
Gantilah Tulisan yang berwarna merah dengan url / link yang akan menjadi tujuan anda.
Gantilah tulisan yang berwarna coklat (menu1, menu2, ...) dengan nama menu yang anda inginkan.

Jika ingin menambahkan menu menjadi dua seperti punya blog ini, tinggal ikuti langkahnya sama seperti langkah diatas (tinggal ganti background dan warna tulisan menunya).

Selesai...
Mohon bantuannya jika dalam penerapan menu ini ada masalah, baik kesalahan dalam kode atau yang lainnya. Mohon maaf karena saya juga pemula.

Intinya...
Menu Navigasi berguna untuk membuat shortcut. Tentu dengan menu ini pengunjung bisa lebih efektif berpetualang dalam blog kita. URL yang tersembunyi pun dapat dengan mudah diakses oleh pengunjung. Sehingga URL yang kita inginkan dapat dilihat oleh orang lain.

Silahkan tinggalkan jejak kunjungan anda dengan berkomentar. Komentar juga berguna sebagai motivasi dan koreksi jika ada kesalahan dalam pembuatan posting. Terima kasih.