<style>
/*-----Horizontal navigation menu from bangiz.blogspot.com------*/
#nav_hr1 {
width:100%
}
#nav_hr1 ul {
list-style:none;
margin:0;
padding:0;
overflow:none;/*Hide the overflow */
}
#nav_hr1 ul li {
float:left;
}
#nav_hr1 ul li a:link,#nav_hr1 ul li a:visited {
display:block;
width:120px;
font-weight:bold;
color:#8db600;
background:#981b1e;
text-align:center;
text-decoration:none;
text-transform:capitalize;
padding:6px 0px;
}
#nav_hr1 ul li a:hover,#nav_hr1 ul li a:active {
background:#a609a9;
-webkit-transition:background .2s ease-in ;
-moz-transition:background .2s ease-in ;
transition:background .2s ease-in ;
}
#nav_hr1 ul li a:hover{
-moz-opacity:0.90;
-khtml-opacity:0.90;
filter:alpha(opacity=90%);
opacity:0.90;
}
#nav_hr1 ul li a:active {
-webkit-box-shadow:inset 1px 1px 1px 1px #188989;
-moz-box-shadow:inset 1px 1px 1px 1px #188989;
box-shadow:inset 1px 1px 1px 1px #188989;
color:#FF3300;
opacity:0.85;
-moz-opacity:0.85;
-khtml-opacity:0.85;
filter:alpha(opacity=85%);
-webkit-transition:all .2s cubic-bezier .1s;
-moz-transition:all .2s cubic-bezier .1s;
transition:all .2s cubic-bezier .1s;
top:12px;
}
</style>
<div id="nav_hr1">
<ul>
<li><a href="#" >Beranda</a></li>
<li><a href="#" >Produk</a></li>
<li><a href="#" >Pelayanan</a></li>
<li><a href="#" >Harga</a></li>
<li><a href="#" >Blog</a></li>
<li><a href="#" >Kontak</a></li>
</ul>
</div>