Nih kawan menu navigasi green, da warnana hejo hehe.. selengkapna baca dibawah, saya dapetin dari blog sebelah he sebab gk ada waktu buat yang kaya ginian inipun maksain, hmhm mumpung lg istirahat dari kesibukan xixixi

<style>
#blazerMenu,
#blazerMenu ul {
    list-style: none;
}
#blazerMenu {
width:980px;
    float: left;
}
#blazerMenu > li {
    float:left;
}
#blazerMenu li a {
display: block;
  
    padding:8px 16px 8px 16px;
    text-decoration: none;
}
#blazerMenu ul {
    position: absolute;
    display: none;
        z-index: 999;
}
#blazerMenu ul li a {
    width: 30px;
 float:left;
}
#blazerMenu li:hover ul {  
}
/* Main menu
------------------------------------------*/
#blazerMenu {
    font-family: Arial;
    font-size: 12px;
    background: #2f8be8;
margin:0 auto;padding:0 auto; 
background: transparent;
padding-left:3px;
border-bottom:5px solid #008E00;
}
#blazerMenu > li > a {
    color: #333;
    font-weight: bold;
    font-size: 16px;
padding:8px 16px 8px 16px;
}
#blazerMenu li:hover {
  
    color: #333;
   
}
#blazerMenu a.arrow{background-image:url(https://lh5.googleusercontent.com/-WSS4CScLl3U/UGrIYZZZ4kI/AAAAAAAAF5k/ypr0GXc2CWI/s16/Actions-arrow-down-icon.png);background-repeat:no-repeat;background-position:right center;padding:8px 24px 8px 16px;}

/* Submenu
------------------------------------------*/
#blazerMenu ul {
    background: #00CC00;
padding:3px 0px 0px 0px;
}
#blazerMenu ul li a {
    color: #fff;
    font-weight: bold;
    font-size: 12px;
width:110px;
padding:6px 0px 6px 6px;
}
#blazerMenu ul  li:hover a {
    background: #80FE80;
}
</style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script>
    $(function(){
        $('#blazerMenu').find('> li').hover(function(){
            $(this).find('ul')
            .removeClass('blazerblog')
            .stop(true, true).slideToggle('height');
        });
    });
    </script>  

<ul id="blazerMenu">
    <li><a href="http://blazerracing.blogspot.com">Home</a></li>
    <li>
    <a class='arrow' href="http://blazerracing.blogspot.com/search/label/tips%20kesehatan">Health</a>
    <ul class="blazerblog">
        <li><a href="#">Diet</a></li>
        <li><a href="#">Fitnes</a></li>
        <li><a href="#">Health Food</a></li>
    </ul>
</li>
    <li>
    <a class='arrow' href="http://blazerracing.blogspot.com/">Blogger</a>
    <ul class="blazerblog">
        <li><a href="#">jQuery</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">Widget</a></li>
    </ul>
</li>
<li>
    <a class='arrow' href="http://blazerracing.blogspot.com/search/label/Resep">Resep</a>
    <ul class="blazerblog">
        <li><a href="#">Dessert</a></li>
        <li><a href="#">Chicken</a></li>
        <li><a href="#">Drink</a></li>
<li><a href="#">Cake</a></li>
<li><a href="#">Breakfast</a></li>
<li><a href="#">Soup</a></li>
<li><a href="#">Pasta</a></li>
<li><a href="#">Seafood</a></li>
    </ul>
</li>

<li>
    <a class='arrow' href="http://blazerracing.blogspot.com/search/label/Beauty">Women</a>
    <ul class="blazerblog">
        <li><a href="#">Beauty</a></li>
        <li><a href="#">Make Up</a></li>
        <li><a href="#">Fashion</a></li>
    </ul>
</li>

<li>
    <a class='arrow' href="http://blazerracing.blogspot.com/search/label/naruto%20shippuden">More</a>
    <ul class="blazerblog">
        <li><a href="#">Kode Warna</a></li>
        <li><a href="#">Get This Menu</a></li>
      
    </ul>
</li>
 
</ul> 

 <div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blazer Blog (Header)' type='Header'/>
</b:section>
</div><!-- end header-wrapper -->
NANTI KODE NOMOR 6 NYA LETAKAN DISINI DI BAWAH KODE AKHIR HEADER