menu vertikal

macam mana nak buat menu vertikal?...contoh gambar kat bawah ni

1. Login ke blogger --> "Layout-->Edit HTML"
2. Masukkan kode berikut sebelum kode ]]></b:skin> atau sebelum kode </style> .

.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://blog.superinhost.com/vertical/blue1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('http://blog.superinhost.com/vertical/blue2.gif');
}

* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }

kalau nak pilih kaler untuk vertikal tu..tgk la contoh kat bawah ni..gantikan kat tulisan yang saya highlight kan..yang bawah ni kalau nak kaler merah...kalau korang ada gambar sendiri pon..bley masukkan...ikut la nak letak gambar milik korang sendiri atau yg contoh kat bawah ni..

.glossymenu li a{
background: white url('http://blog.superinhost.com/vertical/red.gif') repeat-x bottom left;

dan

.glossymenu li a:hover{
background-image: url('http://blog.superinhost.com/vertical/red.gif');

Pilihan Warna menu vertikal :

	blue1.gif blue2.gif
	green1.gif green2.gif
	red1.gif red2.gif
	pink1.gif pink2.gif
	black1.gif black2.gif

3. Pastu save.
4.pergi ke menu "Page Elements"
5. Pilih "Add a Gadget -->HTML/JavaScript" kemudian masukkan kod bawah ni kat dalam kotak tu;

<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="http://link-anda.com">menu1</a></li>
<li><a href="http://link-anda.com" >menu2</a></li>
<li><a href="http://link-anda.com">menu3</a></li>
</li>
</ul>

Kode yang berwarna merah = linknya

yg warna biru = teks yang ditampilkan.

tambah menu =tambah kod yg berkelip2 kat bawah dia.

macam tu je..senang x?