javascript - Sub-menu not showing up after screen resize -

i'm trying build custom responsive navigation changes 100% width pulldown menu mobile. have javascript hides sub menu items may open if window resized new breakpoint (it changes @ 768px). however, if open sub menu @ mobile size (less 768px) , resize window hover effect doesn't work , sub menu items not show on larger screen size.

here jsfiddle of stripped down version of navigation https://jsfiddle.net/5h5bhwu4/2/

the part think might causing problem javascript:

    if (w > 768) {         $("#nav > li > ul").hide();     } 

if click on first menu item @ low screen size, resize window not show same sub menu when hover on parent item. if start @ larger screen size (or if don't open sub menu in low screen size) work fine. think problem in javascript can't see stop sub menu showing.

you need hover effect on js, not on css.

when see size of window:

if (w > 768) {     $("#nav > li > ul").hide();     // put hover here } 

you need force hover, , can't css