Confusion with making a dropdown menu clickable for mobile users

Question

Hey i'm having some trouble getting my drop down menu clickable. Everything is working fine in the hover state but i want it to be clickable for mobile users. Please see my code any help would be greatly appreciated. I want to keep the hover state for people using a PC but also want the click to be working for mobiles.

Many thanks Sam

 $(document).ready(function() { $('.topnav').click(function() { $('.sub-nav').toggleClass('visible'); }); }); 

 .subnav ul.sub-nav{ display: none; } .subnav ul.visible { display: block; } #headernav .tile:hover a{ background-color:#fff; border-radius: 0 0 5px 5px; -webkit-box-shadow: -1px -1px 4px 2px rgba(0,0,0,0.51); -moz-box-shadow: -1px -1px 4px 2px rgba(0,0,0,0.51); box-shadow: -1px -1px 4px 2px rgba(0,0,0,0.51); -webkit-transition:0.5s ease-in; -moz-transition:0.5s ease-in; -o-transition:0.5s ease-in; } #headernav .abouttile { width:13%; float: left; margin:0 3%; transition:0.5s ease-out; -webkit-transition:0.5s ease-out; -moz-transition:0.5s ease-out; -o-transition:0.5s ease-out; } #headernav .abouttile:hover{ background-color:#fff; border-radius: 0 0 5px 5px; padding-bottom:10%; -webkit-box-shadow: -1px -1px 4px 2px rgba(0,0,0,0.51); -moz-box-shadow: -1px -1px 4px 2px rgba(0,0,0,0.51); box-shadow: -1px -1px 4px 2px rgba(0,0,0,0.51); -webkit-transition:0.5s ease-in; -moz-transition:0.5s ease-in; -o-transition:0.5s ease-in; } #headernav .projecttile { width:13%; float: left; margin:0 3%; transition:0.5s ease-out; -webkit-transition:0.5s ease-out; -moz-transition:0.5s ease-out; -o-transition:0.5s ease-out; } #headernav .projecttile:hover{ background-color:#fff; border-radius: 0 0 5px 5px; padding-bottom:16%; -webkit-box-shadow: -1px -1px 4px 2px rgba(0,0,0,0.51); -moz-box-shadow: -1px -1px 4px 2px rgba(0,0,0,0.51); box-shadow: -1px -1px 4px 2px rgba(0,0,0,0.51); -webkit-transition:0.5s ease-in; -moz-transition:0.5s ease-in; -o-transition:0.5s ease-in; } #headernav .subnav ul{ display:none; position: absolute; border-radius: 0 0 5px 5px; list-style-type: none; padding:0.5%; width:auto; margin: 1.8% 0 0 0; } #headernav .subnav:hover ul{ display:block; } #headernav .subnav ul li{ background-color:transparent; width:100%; font-size:0.8em; line-height: 1.6; -webkit-transition:0.5s ease-out; -moz-transition:0.5s ease-out; -o-transition:0.5s ease-out; } #headernav .subnav ul li:hover{ opacity: 0.8; text-decoration: underline; font-weight:bold; -webkit-transition:0.5s ease-in; -moz-transition:0.5s ease-in; -o-transition:0.5s ease-in; } .current{ width:auto; padding: 5% 9%; margin: 0 18%; color:#222222; float:left; border-radius: 0 0 5px 5px; -webkit-box-shadow: -1px -1px 4px 2px rgba(0,0,0,0.51); -moz-box-shadow: -1px -1px 4px 2px rgba(0,0,0,0.51); box-shadow: -1px -1px 4px 2px rgba(0,0,0,0.51); font-weight: bold; background-color: #fff; } .topnav{ color:#222222; text-decoration: none; font-weight: bold; color:#222222; padding: 5% 9%; margin: 0 2%; float:left; -webkit-transition:0.5s ease-out; -moz-transition:0.5s ease-out; -o-transition:0.5s ease-out; } .currenttile{ width:18%; float: left; height:auto; margin:0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="header"> <div class="headerlogo"> <img src="images/logo3.png"> </div> <div id="headernav"> <div class="currenttile"> <a class="current" href="index.html">Home</a> </div> <div class="abouttile"> <div class="subnav"> <div class="topnav" href="about.html">About Us</div> <ul class="sub-nav"> <a href="#"><li>The Organisation</li></a> <a href="#"><li>Our Goals</li></a> <a href="#"><li>Acheivements</li></a> <a href="#"><li>Partnerships</li></a> </ul> </div> </div> <div class="projecttile"> <div class="subnav"> <div class="topnav" href="projects.html">Projects</div> <ul class="sub-nav"> <a href="#"><li>Fuel Poverty</li></a> <a href="#"><li>Carers</li></a> <a href="#"><li>Education</li></a> <a href="#"><li>Sensory Garden</li></a> <a href="#"><li>Prayer Sessions</li></a> <a href="#"><li>Capacity Buildings</li></a> <a href="#"><li>Mental Health</li></a> </ul> </div> </div> <div class="tile"> <div class="subnav"> <a class="topnav" href="services.html">Services</a> <ul> </ul> </div> </div> <div class="tile"> <a class="topnav" href="contact.html">Contact Us</a> </div> </div> </div> </div> 

Answer 1

$(document).ready(function() {
        $('.topnav').click(function() {
            $('.sub-nav').toggle();
        });
    });

this should do the trick