Simple Css vertikal Menu Dengan Highlight

Simple Vertikal menu dengan highlight ini di buat mengguakan css murni dan kode html .menu ini akan berubah warna pada background (effect Highliht) jika kursor mouse di arahkan pada bagian menu tersebut.

Lihat Demo

Dan adapun cara pembuatanya adalah :
1 Sign in ke blogger dengan ID anda
2 Click layout tab
3 Click Edit HTML tab
4 Click Download Full Template, simpan template anda untuk backup data.
5 Letakan CSS code di bawah ini diatas kode ]]></b:skin>

#menu1 {
width: 200px;
float:left;
border:3px solid #eee;
}

#menu1 ul
{
font-family: Arial, Helvetica, sans-serif;
list-style-type:none;
margin:0;
padding:0;

}

#menu1 li
{

display: inline;
/* for IE5 and IE6 */
}
#menu1 a
{
color: #fff;
text-decoration: none;
font-size: 14px;
display: block;
padding: 3px;
width: 160px;
background-color: #686C7A;
border-bottom: 1px solid #eee;width:194px;
}

#menu1 a:link, #menu1 a:visited
{
color: #EEE;
text-decoration: none;
}

#menu1 a:hover
{
background-color: #00BEE4;
color: #fff;
}

#menu1 li a#current
{
border-bottom: 3px solid #DAD6B7;
background: #00BEE4;
}

2.Kode Html copy kode di bawah ini dan pastekan diantara kode <body> dan kode </body> di mana anda ingin menampilkan menu tersebut.

<div id="menu1">
<ul>
<li><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

7.Klik save templete button

8.selesai....

Gudang Menu

Gudang