<!-- Credits to FreshInbox.com / Justin Khoo - This code was taken from the FreshInbox Blog -->

<!-- START NAVIGATION -->
<table width="640" border="0" cellspacing="0" cellpadding="0" class="wrapper" bgcolor="#333333">
  <tr>
    <td align="center">

      <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" class="container">
        <tr>
          <td align="center">

            <div id="navcontainer">
              <!--[if !mso 9]><!-->
              <label for="navcheckbox">
              <div class="nav-under" style="display:none;overflow:hidden;max-height:0px;background-color:#333333;"><img src="http://s32.postimg.org/65iy1qngh/hamburger.png" width="30" height="40" alt="Show Menu" border="0"></div>
              <div class="nav-over" style="display:none;overflow:hidden;max-height:0px;position:absolute;top:0px;width:100%;opacity:0
              "><img src="http://s32.postimg.org/65iy1qngh/hamburger.png" width="30" height="40" alt="Show Menu" border="0"></div>
              </label>
              <!--<![endif]-->
              <div id="menucontainer">
              <!--[if !mso 9]><!--><input id="navcheckbox" type="checkbox" style="display:none !important;mso-hide:all"><!--<![endif]-->
              <table cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#333333" style="width:100% !important">
                <tr>
                  <th height="35" align="center" style="font-size:12px; line-height:18px;"><a href="#" target="_blank" style="font-family: Arial, sans-serif; font-size:12px; line-height:18px; color:#ffffff; text-decoration:none; font-weight:normal;">Link 1</a></th>
                  <th height="35" align="center" style="font-size:12px; line-height:18px;"><a href="#" target="_blank" style="font-family: Arial, sans-serif; font-size:12px; line-height:18px; color:#ffffff; text-decoration:none; font-weight:normal;">Link 2</a></th>
                  <th height="35" align="center" style="font-size:12px; line-height:18px;"><a href="#" target="_blank" style="font-family: Arial, sans-serif; font-size:12px; line-height:18px; color:#ffffff; text-decoration:none; font-weight:normal;">Link 3</a></th>            
                  <th height="35" align="center" style="font-size:12px; line-height:18px;"><a href="#" target="_blank" style="font-family: Arial, sans-serif; font-size:12px; line-height:18px; color:#ffffff; text-decoration:none; font-weight:normal;">Link 4</a></th>
                  <th height="35" align="center" style="font-size:12px; line-height:18px;"><a href="#" target="_blank" style="font-family: Arial, sans-serif; font-size:12px; line-height:18px; color:#ffffff; text-decoration:none; font-weight:normal;">Link 5</a></th>
                  <th height="35" align="center" style="font-size:12px; line-height:18px;"><a href="#" target="_blank" style="font-family: Arial, sans-serif; font-size:12px; line-height:18px; color:#ffffff; text-decoration:none; font-weight:normal;">Link 6</a></th>
                </tr>
              </table>
              </div>
            </div>

          </td>
        </tr>
      </table>

    </td>
  </tr>
</table>
<!-- END NAVIGATION -->

<!-- Add the follow css to your style tag in the head -->

<!--

input { display:none; }
@media (max-width:480px) {
#logo {height:28px !important;
  margin-top:3px;
}
.main-table, .main-content img { width:100% !important;}
#navcontainer{
  position:relative;
}
#navcontainer th{
  display:block;
  width: 100%;
  border-bottom:2px solid #333333;
  height:18px;
  padding: 10px 0px;      
}
#menucontainer{
  position:relative;
  overflow:hidden;
}
#navcontainer table{
  margin-top:-500px;
  -ms-transition: margin-top .5s ease-in-out;
  -webkit-transition: margin-top .5s ease-in-out;      
}
/* checkbox mechanism */
#navcheckbox:checked + table{
  margin-top:0%;
}      
/* fallback hover mechanism */
.nav-over,.nav-under{
 display:block !important;
 max-height:none !important;
 padding-top:3px;
 padding-bottom:3px;
} 
.nav-over img,.nav-under img{
 display:block;
 float:right;
 margin-right:5px;
} 
/*
to deal with quirks in windows 8.1 and Outlook iOS
*/
.nav-over{
 -ms-transition-delay: 1.5s;
 -webkit-transition-delay: 1.5s;            
}
#navcontainer > .nav-over:hover + div table{
  margin-top:0% !important;
}
#navcontainer > .nav-over:hover{
  visibility:hidden;
}
} 

-->
