Hey guys. I am currently working on a project for a college mobile design class. I feel like I have backed myself into a corner by deciding to go with plain ol' html5/css3 instead of using the jquery mobile framework. What I am trying to do is create a navigation drop-down menu that adjusts to device size. As you can see from my site link below, I have managed to make the site fairly responsive in regards to which device the site is being viewed on. The site needs to work on desktop, phones, and tablets. I only have two days remaining to get the nav menu up, but it is the only thing I have left to do before the draft is due. Yes, I realize it could be a lot better but oh well.

Any suggestions as to how I should go about it without having to port everything over to jquery? I am guessing that I will need to use a little javascript to add the onclick functionality, but after spending the last five hours looking up tutorials on how to implement that all I ended up doing is breaking my current setup.

Here's the link to the site.

My Site

By the way, the media queries work best in Chrome. Firefox doesn't seem to wanna shrink down as far while still scaling.

I don't get a dropdown in any browser I tried. Am I supposed to? In a little older browsers the menu isn't styled at all. It's a plain list.

There isn't a drop-down menu at all yet. I am just looking for suggestions on how to go about it.

No idea if dropdown menus work well on small (mobile) screens in the first place, but the Suckerfish dropdowns seem reasonably functional in desktop browsers and doesn't need JS at all (except in older MSIE). How you style it for small screens may depend on the size of the submenus.