Cara Membuat Simple Css Vertikal Menu Border Highlight

Simple Css Vertikal Menu Border Hightight ini dibuat dengan Css murni dan kode html,Tidak jauh berbeda denagan menu vertikal sebelumnya (Simple Css vertikal Menu Dengan Highlight ) yang membedakannya adalah pada menu kali ini effect pada bagian kiri menu border dan highligt ketika mouse diarahkan.

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>

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

}

#menu3 ul
{
font-family: Arial, Helvetica, sans-serif;
list-style-type: circle;
list-style-position:inside;
margin:0;
padding:0;
}
#menu3 li
{
display: inline;
/* for IE5 and IE6 */
}

#menu3 a
{
color: #483000;
text-decoration: none;
font-size: 14px;
display: block;
padding: 3px;
width: 160px;
background-color: #fff;
border-bottom: 1px solid #fff;
width: 194px;
}

#menu3 a:link, #menu3 a:visited
{
color: #483000;
text-decoration: none;
}

#menu3 a:hover
{
border-left: 5px solid #901818;
color: #000;background: #F0F0F0;
}

#menu3 li a#current
{
border-left: 5px solid #901818;
background: #F0F0F0;
color: #000;
}

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="menu3">
<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