jquery - Drop-Down Menu Disconnects -

jquery - Drop-Down Menu Disconnects -

i have navbar @ top of pages. when browser width less 40em, links in navbar become hamburger. when clicked, hamburger turns greenish , drops downwards menu using jquery toggleclass function. on browsers i've tried (chrome, firefox, safari, , ios) except ios, hamburger works properly. however, on ios, hamburger turns green, moves off header, , drop-down menu disconnected header. html:

<span class="mobile-nav"> <div class="menu-btn" id="menu-btn"> <div> <a href="#" id="hamburger" onclick="return false;"> </a> </div> </div> <div class="responsive-menu"> <div> <div class="spacer"></div> <a href="/about">about</a><div class="spacer"></div> <a href="/why">why enc0de</a><div class="spacer"></div> <a href="/contact">contact</a><div class="spacer"></div> </div> </div> </span>

css:

.mobile-nav { float: right; } .responsive-menu { display: none; } #hamburger { margin: .813em 1.25em 0em 0em; width: 2.5em; height: 2.125em; float: right; background-image: url('/images/hamburger.gif'); background-size: 2.5em 2.125em; background-repeat: no-repeat; } #hamburger.expand { background-image:url('/images/green_hamburger.gif'); } div.expand { position: relative; display: inline-block; z-index: 999; background-color: rgba(247, 247, 247, 1); top: .843em; right: 0em; border-style: hidden; border-width: .063em; border-radius: 0em 0em 0em .5em; box-shadow: 0 .188em .375em rgba(0, 0, 0, 0.24); } div.expand div { margin: 0em; padding: 0em; } div.expand div { font-size: 1.5em; font-family: tahoma, geneva, sans-serif; font-weight: bold; margin: 0em .5em 0em .75em; color: black; text-decoration: none; -o-transition:.3s; -ms-transition:.3s; -moz-transition:.3s; -webkit-transition:.3s; transition:.3s; } div.expand div a:hover { color: #00c900; }

jquery:

jquery(document).ready(function ($){ $( '.menu-btn' ).click(function(){ $('.responsive-menu').toggleclass('expand') $('#hamburger').toggleclass('expand') }) });

after many hours of research , attempted debugging, still confused. help, suggestions, or ideas appreciated.

i think you're trying create accordian menu. i've never seen done using strictly divs, might want consider using unordered list ( < ul > < / ul > ) list items ( < li > < / li > ) on display:none, using jquery find , display list within ul clicked on. speaking of jquery code, haven't attached yours, please do.

watch tutorial via link illustration of should do, provides not html , css code, jquery code accordian menu: http://thecodeplayer.com/walkthrough/vertical-accordion-menu-using-jquery-css3

jquery html ios css