Bikin Menu Dgn Descriptions

Ini salah satu menu vertikal,yg sangat cantik,mempunyai efek hover yg bisa menampilkan title dari link untuk menu tersebut.gw juga kasih efek  Shadow/bayangan jadi efek hover nya mempunyai  shadow.dan tulisan di Menu nya juga telah dipasang Text-shadow,Setelah di Design  akhir nya menu ini,tidak lagi bewarna hijo kowkowkowk....jadi sobat jangan BT dulu, tidak semua yg di blog gw ini tampilan nya hijo ^_^..tapi ada jg warna laen nya.kali ini tampilan Menu nya Warna Cyan kebiru2an gitu ~_~..,lumayan keren dah..

Demo Klik tulisan di atas untuk melihat demo nya

Untuk membuatnya ikuti langkah-langkah dibawah ini.

1. Login blogger
2. Tata Letak/Layout - Edit HTML
3. Klik pada Expand Template Widget.
4.  Selanjutnya cari kode ]]></b:skin>, Jika sudah ketemu letakkan kode CSS dibawah ini tepat sebelum atau diatas kode ]]></b:skin> tersebut:

CSS

ul#pandetdescript {
margin : 5px;
list-style-type : none;
font-size : 90%;
}
ul#pandetdescript li {
margin-bottom : 5px;
}
ul#pandetdescript a {
opacity:0.7;
-moz-opacity:0.7;
filter:alpha(opacity=70);
position : relative;
text-align:center;
width : 145px;
height : 40px;
display : block;
padding : 5px;
padding-right : 0;
border : 2px solid cyan;
background:-moz-linear-gradient(top,#013030,cyan,#013030);
color: #f3f3f3;
text-shadow: 1px 1px 4px #000;
text-decoration : none;
font-weight : bold;
cursor : pointer;
}
ul#pandetdescript a span {
z-index:1; border:8px solid #45818e;
position : absolute;
top : -9000px;
left : -9000px;
display : block;
width : 300%;
height :100px;
background:#45818e;
-moz-box-shadow: -5px -5px 35px cyan;
border: 4px solid cyan;
border-left : 0;
padding : 5px;
padding-left : 23px;
text-indent : -17px;
cursor : pointer;
color: #000;
}
ul#pandetdescript a:hover, ul#pandetdescript a:focus,
ul#pandetdescript a:active {
background:-moz-linear-gradient(top,#013030,cyan,#013030);
-moz-box-shadow: -5px -5px 35px cyan;
color: cyan;
text-shadow: 1px 1px 4px #000;
opacity:1.0;
-moz-opacity:1.0;
filter:alpha(opacity=100);
}
ul#pandetdescript a:hover span, ul#pandetdescript a:focus span,
ul#pandetdescript a:active span {
top : -1px; opacity:0.9;-moz-opacity:0.9;filter:alpha(opacity=90);
left :150px;
}

Dan masukin Kode di bawah ini di 
~Edit HTML
~Elemen Laman
~Tambah GadgetJavascript/HTML :

MARKUP

<ul id="pandetdescript">
<li><a href="http://pandet-pandet.blogspot.com"><strong>Home</strong>
<span>&rarr;Masukan title...!!!</span></a></li>
<li><a href="Url Link"><strong>Menu 2</strong>
<span>&rarr;Masukan title...!!!</span></a></li>
<li><a href="Url Link"><strong>Menu 3</strong>
<span>&rarr;Masukan title...!!!</span></a></li>
</ul>

Selamat Mencoba
http://memangbedale.blogspot.com/