Touch/Click Event Not Working

Hi all,

I have developed a custom WordPress theme with HTML, CSS and jQuery.

My issue is... I'm unable to position the sub nav drop-down content below the parent button.

Also, they are only showing when I hover the mouse over the parent button, I would like them to stay open when clicked or touched (for mobile).

How could I achieve this?

HTML:

<button class="hamburger">&#9776;</button>
      <button class="cross">&#735;</button>

        <div class="menu">
          <li>
              <a href="<?php echo home_url( '/' ); ?>">Home</a>
          </li>
          <li id="products">
              <a href="#">Products</a>
              <ul class="subnav">
                  <li><a href="http://www.regalgaming.co.uk/products/digital-gaming/">Digital Evolution</a></li>
                  <li><a href="http://www.regalgaming.co.uk/products/awp/">Fruit Machines</a></li>
                  <li><a href="http://www.regalgaming.co.uk/products/club-machines/">Club Machines</a></li>
                  <li><a href="http://www.regalgaming.co.uk/products/pool-tables/">Pool Tables</a></li>
                  <li><a href="http://www.regalgaming.co.uk/products/swp/">Digital Quiz Machines</a></li>
                  <li><a href="http://www.regalgaming.co.uk/products/audio-visual/">Audio Visual</a></li>
                  <li><a href="http://www.regalgaming.co.uk/other-equipment/">Other Equipment</a></li>
              </ul>
          </li>
          <li>
            <a href="http://www.regalgaming.co.uk/services/">Services</a>
          </li>
          <li id="aboutus">
              <a href="#">About us</a>
              <ul class="subnav">
                  <li><a href="http://www.regalgaming.co.uk/about-us/who-we-are/">Who we are</a></li>
                  <li><a href="http://www.regalgaming.co.uk/about-us/meet-the-team/">Meet the Team</a></li>
                  <li><a href="http://www.regalgaming.co.uk/about-us/research-and-development/">R&D Centre</a></li>
                  <li><a href="http://www.regalgaming.co.uk/responsibility/">Responsibility</a></li>
                  <li><a href="http://www.regalgaming.co.uk/regulatory/">Regulatory</a></li>
              </ul>
          </li>
          <li id="contact">
              <a href="http://www.regalgaming.co.uk/contact/">Contact</a>
              <ul class="subnav">
                  <li><a href="http://www.regalgaming.co.uk/contact/careers/">Careers</a></li>
                  <li><a href="http://www.regalgaming.co.uk/contact/depots/">Service Centres</a></li>
                  <li><a href="http://www.regalgaming.co.uk/request-site-visit/">Request Site Visit</a></li>
              </ul>
          </li>
        </div>

CSS:

.hamburger{
  background:none;
  position:absolute;
  top:0;
  right:0;
  line-height:45px;
  padding:5px 15px 0px 15px;
  color:#2a2c68;
  border:0;
  font-size:1.4em;
  font-weight:bold;
  cursor:pointer;
  outline:none;
  z-index:10000000000000;
}
.cross{
  background:none;
  position:absolute;
  top:0px;
  right:0;
  padding:7px 15px 0px 15px;
  color:#2a2c68;
  border:0;
  font-size:3em;
  line-height:65px;
  font-weight:bold;
  cursor:pointer;
  outline:none;
  z-index:10000000000000;
}
.menu{z-index:1000000; font-size:0.8em; width:100%; background:#2a2c68;  position:absolute; text-align:center; font-size:12px;}
.menu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none;}
.menu li {display: block;   padding:15px 0 15px 0; border-bottom:#dddddd 1px solid;}
.menu li a {padding: 15px;}
.menu li:hover{display: block;    background:#2a2c68; padding:15px 0 15px 0; border-bottom:#dddddd 1px solid;}
.menu ul li a { text-decoration:none;  margin: 0px; padding: 15px; color:#2a2c68;}
.menu ul li a:hover {font-weight: bold; color: #2a2c68; text-decoration:none;}
.menu a{text-decoration:none; text-transform: uppercase; color:#ffffff;}
.menu a:hover{text-decoration:none; color:#ffcc00;}

#products a, #aboutus a, #contact a {
    border-left: 0 none;
}

@media (min-width: 60rem) {

  .hamburger {
    display: none;
  }
  .cross {
    display: none;
  }
  .menu {
    display: none;
  }
}

.subnav {
    visibility: hidden;
    position: absolute;
    top: 110%;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 200px;
    height: auto;
    opacity: 0;
    transition: all 0.1s;
    background: #2a2c68;
}
.subnav li {
    float: none;
}
.subnav li a {
    line-height: 30px;
    text-transform: none;
    text-align: left;
}
#products:hover .subnav, #aboutus:hover .subnav, #contact:hover .subnav {
    visibility: visible;
    top: 100%;
    opacity: 1;
}

@media (max-width: 60rem) {
  .subnav {
      visibility: hidden;
      width: 100%;
      background: #ffcc00;
  }
  .subnav li {
      padding-top: 10px;
      padding-bottom: 10px;
  }
  .subnav li:hover{display: block;    background:#ffcc00; padding:10px 0 10px 0; border-bottom:#dddddd 1px solid;}
}

jQuery:

jQuery(document).ready(function( $ ) {

              $( ".cross" ).hide();
              $( ".menu" ).hide();
              $( ".hamburger" ).click(function() {
              $( ".menu" ).slideToggle( "slow", function() {
              $( ".hamburger" ).hide();
              $( ".cross" ).show();
              });
              });

              $( ".cross" ).click(function() {
              $( ".menu" ).slideToggle( "slow", function() {
              $( ".cross" ).hide();
              $( ".hamburger" ).show();
              });
              });

              });

All help is greatly appreciated.