jquery - Dropdown navigation on mobile devices -

my company develops sites using proprietary cms, , our ability adapt mobile development pretty bad. develop mobile-specific sites, don't give them away free. anyway, of our sites use horizontal navigation unordered lists, child menu appears when parent item hovered on. fine on desktop devices, doesn't work on mobile browsers. child menus appear, function if transparent clicks on child items going - or worse, going links behind child menus.

i able write short jquery script (i'm beginner jquery) forces child menu stay visible if parent link clicked. works, not on first click - on first click, browser tries initiate mobile hovering emulation (?) , flashes child menu on screen instant. second click open child menu, , @ point child menu functional, or can closed clicking elsewhere. not ideal.

here's jquery script. if element has .dropper class, have ul next sibling, that's how selector works.

$(function() {      $('a.dropper').click(function(){           $(this).next().toggle();      }); }); 

hopefully knows method can these menus working both desktop , mobile browsers using same html , css. unfortunately, media queries might not possible implement in our system. obviously, i'd rather away kind of navigation, , design more responsively, that's problem day.

i've been using chrome on recent android device mobile test environment, solution ought work on iphone well.

media queries might not right idea anyway. what's better detect device on server side , return different version of content tailored mobile. it's easier start mobile first if have option. media queries kind of strange in mobile browsers load of content , make slow-to-load, expensive-to-load site, since loading content desktop site (which larger, formatting content smaller screen.

media queries more sizing site different devices or different sized browser windows...and not preventing content being loaded device...that's user agent detection for.