Cara memasang CSS Indent Menu

Hallo friend, saya ada tip untuk Navigasi ya mungkin warnanya cocok sama template anda, tapi saya gak ada contohnya, tapi gampang kok tinggal backup template anda lau coba untuk lihat hasilnya.Ok kita mulai aja ya saya gak perlu lama-lama.

Letakkan kode dibawah , diatas kode ini ]]></b:skin>;
<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.indentmenu{
font: bold 13px Arial;
width: 100%; /*leave this value as is in most cases*/
overflow: hidden;
}

.indentmenu ul{
margin: 0;
padding: 0;
float: left;
width: 100%; /*width of menu*/
border: 1px solid #564c66; /*dark purple border*/
border-width: 1px 0;
background: black url(http://i721.photobucket.com/albums/ww218/sugwi/indentbg.gif) center center repeat-x;
}

.indentmenu ul li{
display: inline;
}

.indentmenu ul li a{
float: left;
color: white; /*text color*/
padding: 5px 11px;
text-decoration: none;
border-right: 1px solid #564c66; /*dark purple divider between menu items*/
}

.indentmenu ul li a:visited{
color: white;
}

.indentmenu ul li a:hover, .indentmenu ul li .current{
color: white !important; /*text color of selected and active item*/
padding-top: 6px; /*shift text down 1px for selected and active item*/
padding-bottom: 4px; /*shift text down 1px for selected and active item*/
background: black url(http://i721.photobucket.com/albums/ww218/sugwi/indentbg2.gif) center center repeat-x;
}

</style>

Lalu pasang kode dibawah ini pada HTML anda
<div class='indentmenu'>
<ul>
<li><a href='http://www.mutiaramail.blogspot.com/'>Home</a></li>
<li><a class='current' href='Link 1/'>Link 1</a></li>
<li><a href='Link 2/'>Link 2</a></li>
<li><a href='Link 3'>Link 3</a></li>
<li><a href='Link 4/'>Link 4</a></li>
<li><a href='Link 5'>Link 5</a></li>
</ul>
</div>

Download

Setelah itu lihat hasilnya, anda suka? Selamat mencoba semoga sukses

Related With: