Membuat Blocks Menu Menggunakan CSS

Ini adalah sebuah Blok Menu CSS yang attractive, dengan efek hover yang menyertainya. Dapat menambahkan beberapa perubahan sesuai dengan keinginan anda, seperti Lebar, warna, ukuran Text dan lain sebagainya.

Letakan kode CSS berikut ini pada tag head template site anda

<style type="text/css">

#blueblock{
width: 180px;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
font-size: 90%;
background-color: #90bade;
color: #333;
}

* html #blueblock{ /*IE 6 only */
w\idth: 147px; /*Box model bug: 180px minus all left and right paddings for #blueblock */
}

#blueblock ul{
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#blueblock li {
border-bottom: 1px solid #90bade;
margin: 0;
}

#blueblock li a{
display: block;
padding: 5px 5px 5px 8px;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}

html>body #blueblock li a{ /*Non IE6 width*/
width: auto;
}

#blueblock li a:hover{
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}

</style>

Pasang kode HTML berikut ini untuk membuat Blocks Menu Biru, letakan pada tad body template site anda.

<div id="blueblock">
<ul>
<li><a href="http://caprt3a.blogspot.com/">Buku Catatan si Ugi</a></li>
<li><a href="http://caprt3a.blogspot.com/">CSS Drive</a></li>
<li><a href="http://caprt3a.blogspot.com/">Forums</a></li>
<li><a href="http://caprt3a.blogspot.com/">Gif Optimizer</a></li>
<li><a href="http://caprt3a.blogspot.com/">Favicon Creator</a></li>
<li><a href="http://caprt3a.blogspot.com/">Button Maker</a></li>
</ul>
</div>

sumber: dynamicdrive