<style type='text/css'>
#tabs28 { float:left; width:100%; background:#fff; font-size:93%; line-height:normal; border-bottom:1px solid #DD740B; }
#tabs28 ul { margin:0; padding:10px 10px 0 50px; list-style:none; }
#tabs28 li { display:inline; margin:0; padding:0; }
#tabs28 a { float:left; background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtTJJPZNdxyT034_Dy_5F9sqiGeB368DxLjRn11ZlJKpUJp17n4hP6ppWKGjM8bVAc3P_Lcx5M4AsLV5ffrVWNph_ErixeaekwD1DXxA_-nkr_ii7H4j3D1ShX5_MPvG_1TsLYkEa98txV/s1600/slide-left.gif") no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; }
#tabs28 a span { float:left; display:block; background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbPMowVz9yBoe14262rBOhJ1B6JRd41u1vUqdKCJc9vCDBvIQhAUCr1Nhil_5Cl6z9eYoQpJ1nBkPb33GvwYVCdzJ2t6EDC_cVXgaI3G1eL-yS4al1Mv9XYKOumwyXV_YN3ZukRTy-T9gY/s1600/side-right.gif") no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; }
#tabs28 a span {float:none;} #tabsI a:hover span { color:#FFF; } #tabs28 a:hover { background-position:0% -42px; }
#tabs28 a:hover span { background-position:100% -42px; }</style>
Catatan:Anda Boleh Ganti tulisan 10 dengan yang anda inginkan(fungsinya untuk panjang jarak atas)
Anda Boleh Ganti tulisan 50 dengan yang anda inginkan(fungsinya untuk panjang sebelah kiri)
7. Sekarang kita menuju ke layout
<div id="tabs28">
<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link 7</span></a></li>
<li><a href="#"><span>Link 8</span></a></li>
</ul>
</div>
ganti Link 1 - Link 8 dengan nama menu yang anda inginkan,
oke mungkin cukup sekian, Semoga Bermanfaat jangan lupa follow akun twitter saya dan like fanspagenya :)