Light Hover Horizontal Menu CSS

1. Login Ke Blogger Kalian
2. Pilih Rancangan
3. Pilih Edit HTML
4. Simpan CSS berikut diatas kode </head>

<style type='text/css'>
#nav { width:100%; margin-left:-40px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJkLWOiBfUcdfvCyfRYHuJ1n90LCQiLyVZhzSxVkzJROOZ3Qj_eYVJbCWtn5maNh-5E1qeX30DEhGKYoS23CRpfYHsCS_abgpp0An1pBS-Pj6Y19GTYTTDFCoT9SMAciMYl50FVYUFeNvE/) repeat-x; }
#nav li { float: left; display: block; }
#nav li a { float: left; display: block; padding: 12px 18px 12px 18px; text-transform: uppercase; text-decoration:none; background: url(http://lh3.ggpht.com/_7ZIYPUkIUEw/TNWkoQFUrEI/AAAAAAAAAFA/3RlsV_UOXlo/navi-bg.jpg) no-repeat top right; color:#ffffff; }
#nav li a:hover { background: url(http://lh3.ggpht.com/_7ZIYPUkIUEw/TNWkoQFUrEI/AAAAAAAAAFA/3RlsV_UOXlo/navi-bg.jpg) no-repeat right -40px; color:#ffffff; text-decoration:none; }
ul#nav li.activee a, ul
#nav li.current-cat a { color: #fff; background: url(http://lh3.ggpht.com/_7ZIYPUkIUEw/TNWkoQFUrEI/AAAAAAAAAFA/3RlsV_UOXlo/navi-bg.jpg) no-repeat right -80px; }
#nav li ul { display: none; }
</style>

5. cari code berikut.

<div id='header-wrapper'><b:section class='header' id='header' maxwidgets='1' showaddelement='no'><br /> <b:widget id='Header1' locked='true' title='test (Header)' type='Header'/><br /> </b:section><br /> </div>

6. Simpan kode berikut setelah kode diatas

<ul id='nav'>
<li class='activee'><a href='/'>Home</a></li> <li><a href='#' title='MENU 1'>MENU 1</a></li>
<li><a href='#' title='MENU 2'>MENU 1</a></li> <li><a href='#' title='MENU 3'>MENU 2</a></li>
<li><a href='#' title='MENU 4'>MENU 3</a></li> <li><a href='#' title='MENU 5'>MENU 4</a></li>
<li><a href='#' title='MENU 6'>MENU 5</a></li> </ul>

7. simpan templet