Bagaimana cara membuat Menu Horizontal pada Blog

Keep semangat gan walau masih Newbie jangan takut salah untuk menyoba,kali ni saya mau berbagi gimana caranya membuat menu horizontal pada Blog,mungkin teman-teman dach pada tau tapi apa salahnya berbagi untuk menambah pengetahuan.

  Lansung ja gan Copy code di bawah ini pada Add Getged kamu di Tataletak Blogspot:

    <style>

    /*---------------------------------------------------------------------------------*/

    /* CATEGORY MENU */

    /*---------------------------------------------------------------------------------*/

    #cat-menu { background:url(pop.png) no-repeat center top; height:35px;}

    /* category navigation */

    .nav { width:100%;z-index:99; float:left; margin:10px 0 0 0; padding:0px; list-style:none; line-height:1; height:35px;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;}

    .nav a { position:relative; color:#999; display:block; z-index:100; text-decoration:none; }

    .nav li { float:left; width:auto; border-right:1px solid #d9d9d9; }

    .nav li a { font:bold 11px/15px Arial,serif; padding:10px 12px; text-decoration:none; text-transform:uppercase; }

    .nav li a:hover, .nav li a:active, .nav li.current-cat, .nav li.current-cat-parent { background:none; color:#004276; text-decoration:underline;}

    .nav li ul { background:#444; position:absolute;width:172px; margin:0px 0px 0px -2px; border:1px solid #333; border-width:1px 1px 0px; z-index:999; }

    .nav li ul li {border-bottom:1px solid #333; border-right:none; }

    .nav li ul li a { background:#444; width:147px; padding:7px 12px; color:#fff; font-size:11px; font-weight:normal; }

    .nav li ul li a:hover { background:#f9f9f9; color:#004276; text-decoration:underline; }

    .nav li ul ul { margin:-31px 0px 0px 171px; }

    </style>

    <div id='cat-menu'>

    <ul class='sf-menu nav' id='cat-nav'>

    <li><a href='/'>Home</a></li>

    <li><a href='#'> Menu 1</a></li>

    <li><a href='#'> Menu 2</a></li>

    <li><a href='#'> Menu 3</a></li>

    <li><a href='#'> Menu 4</a></li>

    <li><a href='#'> Menu 5</a></li>

    </ul>                    

    </div>

NB: Ganti tanda # dengan kode link kamu misal dari Label,Selanjutnya ganti tulisan Menu 1 dengan yang kamu inginkan