Contoh sintak bikin menu di blog anda

Kode Css

<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;
     }

Ini sintak menu nya

     </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>