javascript - Confusion with making a dropdown menu clickable for mobile users -

javascript - Confusion with making a dropdown menu clickable for mobile users -

hey i'm having problem getting drop downwards menu clickable. working fine in hover state want clickable mobile users. please see code help appreciated. want maintain hover state people using pc want click working mobiles.

many sam

class="snippet-code-js lang-js prettyprint-override">$(document).ready(function() { $('.topnav').click(function() { $('.sub-nav').toggleclass('visible'); }); }); class="snippet-code-css lang-css prettyprint-override">.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; } class="snippet-code-html lang-html prettyprint-override"><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>

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

this should trick

javascript android ios css html5