Drop-Down Menu Mobile Friendly Without jQuery?

Anyone got any good resources for a horizontal CSS menu that can be made to work on mobile devices and does not use jQuery? I hate jQuery. One of the problems I have on a site is that I designed it years ago before the rise in mobile and it uses a pure CSS drop-down menu. So I am looking for something that works on desktop and maybe with some CSS and a little Javascript tweaks is suitable for tablets (and possibly smart phones). Menu will be multiple level on desktop and I am not sure about tablets.

I am a bit out of date in this area. I do not have a smart phone or tablet right now. So I have nothing to test on.

I spent the past half hour searching and it seems everything uses jQuery or is overly complicated. Thanks.

 

Dropdown menus and mobile are a train wreck, best way to do it is NOT TO DO IT IN THE FIRST PLACE! From an accessibility standpoint, just go back to classic drilldown navigation through the various site pages by section... besides, if you have enough menu items to 'need' dropdowns/flyouts, you are risking "link overload" where new users to the site can't find anything because they can't find the forest for the trees.

Now, that said... IF you "must" make a fat bloated menu with dropdowns, for mobile you'll want to hide the whole thing and be able to toggle it appearing/not appearing... with the dropdowns being best handled simply as indented sub-sections. To do this you don't even need JavaScript whatsoever as CSS3 and the :target attribute has opened the door to some real possibilities.

That said, making code to show this in action is hard to do without knowing what your menu items are... If you were willing to provide the UL in a UL markup as expected for a menu, I could easily fix up that markup and toss together a working demo with CSS for you. Again, content FIRST. Creating markup or demo code without knowing what the content is truly is an effort in futility.

Though to generally overview -- you would first make the desktop/mouse dropdown version using overflow:hidden on the LI with :hover doing overflow:visible. ALWAYS have the parent element of the dropdowns also be a link to a page where you can select those dropdown items as a fallback should the CSS fail. Then wrap that menu in a DIV with an ID like "mainMenu" on it, and put two anchors before the UL with the hrefs "#" and "#mainMenu" -- you then use :target to show/hide the menu and have the media query re-arrange the nested list to look like a standard nested list.

Again, if you had an example UL/LI of menu items with the sub-menus being UL/LI inside the parent LI, I can throw together a working example of that in action -- no scripting needed.