<!-- the full contents of this file are included in the head block of your page -->
<!-- note to work we must start with the js/ directory, then the name of the folder -->

<!-- Main Link: http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly -->
<!-- For Demo See: http://osvaldas.info/examples/drop-down-navigation-touch-friendly-and-responsive/ -->
<!-- To Use: Visit link above, and copy out the nav block. Change to fit your needs, then add to a Code Block Element -->
<!-- Next, select your page and click the 'Make This Page Responsive' Button under: 'Form Style Properties' --> 

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.min.js"></script>

<script type="text/javascript">
  
/*
	By Osvaldas Valutis, www.osvaldas.info
	Available for use under the MIT License
*/

;(function( $, window, document, undefined )
{
	$.fn.doubleTapToGo = function( params )
	{
		if( !( 'ontouchstart' in window ) &&
			!navigator.msMaxTouchPoints &&
			!navigator.userAgent.toLowerCase().match( /windows phone os 7/i ) ) return false;

		this.each( function()
		{
			var curItem = false;

			$( this ).on( 'click', function( e )
			{
				var item = $( this );
				if( item[ 0 ] != curItem[ 0 ] )
				{
					e.preventDefault();
					curItem = item;
				}
			});

			$( document ).on( 'click touchstart MSPointerDown', function( e )
			{
				var resetItem = true,
					parents	  = $( e.target ).parents();

				for( var i = 0; i < parents.length; i++ )
					if( parents[ i ] == curItem[ 0 ] )
						resetItem = false;

				if( resetItem )
					curItem = false;
			});
		});
		return this;
	};
})( jQuery, window, document );
  
</script>

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400">

<style>
  
  /* Unset some default RackForms styles */
  
  .form-output-div li { padding:0px !important; margin-bottom:0px !important; }
  .form-output-sortable li { padding: 0px !important; margin-bottom:0px !important; }
  a { text-decoration:none !important; }

  body
  {
      background-color: #f7efeb;
      padding: 1.25em; /* 20 */
  }
  
  #nav
  {
      width: 60em; /* 1000 */
      font-family: 'Open Sans', sans-serif;
      font-weight: 400;
      position: absolute;
      top: 25%;
      left: 50%;
      margin-left: -30em; /* 30 480 */
  }
  
      #nav > a
      {
          display: none;
      }
  
      #nav li
      {
          position: relative;
      }
          #nav li a
          {
              color: #fff;
              display: block;
          }
          #nav li a:active
          {
              background-color: #c00 !important;
          }
  
      #nav span:after
      {
          width: 0;
          height: 0;
          border: 0.313em solid transparent; /* 5 */
          border-bottom: none;
          border-top-color: #efa585;
          content: '';
          vertical-align: middle;
          display: inline-block;
          position: relative;
          right: -0.313em; /* 5 */
      }
  
      /* first level */
  
      #nav > ul
      {
          height: 3.75em; /* 60 */
          background-color: #e15a1f;
      }
          #nav > ul > li
          {
              width: 25%;
              height: 100%;
              float: left;
          }
              #nav > ul > li > a
              {
                  height: 100%;
                  font-size: 1.5em; /* 24 */
                  line-height: 2.5em; /* 60 (24) */
                  text-align: center;
              }
                  #nav > ul > li:not( :last-child ) > a
                  {
                      border-right: 1px solid #cc470d;
                  }
                  #nav > ul > li:hover > a,
                  #nav > ul:not( :hover ) > li.active > a
                  {
                      background-color: #cc470d;
                  }
  
  
          /* second level */
  
          #nav li ul
          {
              background-color: #cc470d;
              display: none;
              position: absolute;
              top: 100%;
          }
              #nav li:hover ul
              {
                  display: block;
                  left: 0;
                  right: 0;
              }
                  #nav li:not( :first-child ):hover ul
                  {
                      left: -1px;
                  }
                  #nav li ul a
                  {
                      font-size: 1.25em; /* 20 */
                      border-top: 1px solid #e15a1f;
                      padding: 0.75em; /* 15 (20) */
                  }
                      #nav li ul li a:hover,
                      #nav li ul:not( :hover ) li.active a
                      {
                          background-color: #e15a1f;
                      }
  
  
  @media only screen and ( max-width: 62.5em ) /* 1000 */
  {
      #nav
      {
          width: 100%;
          position: static;
          margin: 0;
      }
  }
  
  @media only screen and ( max-width: 40em ) /* 640 */
  {
      html
      {
          font-size: 75%; /* 12 */
      }
  
      #nav
      {
          position: relative;
          top: auto;
          left: auto;
      }
          #nav > a
          {
              width: 3.125em; /* 50 */
              height: 3.125em; /* 50 */
              text-align: left;
              text-indent: -9999px;
              background-color: #e15a1f;
              position: relative;
          }
              #nav > a:before,
              #nav > a:after
              {
                  position: absolute;
                  border: 2px solid #fff;
                  top: 35%;
                  left: 25%;
                  right: 25%;
                  content: '';
              }
              #nav > a:after
              {
                  top: 60%;
              }
  
          #nav:not( :target ) > a:first-of-type,
          #nav:target > a:last-of-type
          {
              display: block;
          }
  
  
      /* first level */
  
      #nav > ul
      {
          height: auto;
          display: none;
          position: absolute;
          left: 0;
          right: 0;
      }
          #nav:target > ul
          {
              display: block;
          }
          #nav > ul > li
          {
              width: 100%;
              float: none;
          }
              #nav > ul > li > a
              {
                  height: auto;
                  text-align: left;
                  padding: 0 0.833em; /* 20 (24) */
              }
                  #nav > ul > li:not( :last-child ) > a
                  {
                      border-right: none;
                      border-bottom: 1px solid #cc470d;
                  }
  
  
          /* second level */
  
          #nav li ul
          {
              position: static;
              padding: 1.25em; /* 20 */
              padding-top: 0;
          }
  }

</style>