This will only work if you are using a polyfill for older browsers (otherwise IE 8 and below would have no menus).
I generally take a mobile first approach with my web development, and while I agree that menus are often the biggest component of my media queries, I think that your suggestion is just introducing more work for yourself.
If I’m understanding correctly, you would be then maintaining two separate styles for your menus? I prefer to set a base style for small devices, and then alter that (based on the core styling) for larger devices. Sure it can be a bit of code that sits in your media queries, but it should mean less code overall, and easier maintainability. Also, I generally choose a specific width (depending on the content), and then have everything larger than that use the ‘big screen’ menu styles.
Thanks @joshuanhibbert, the whole IE8 thing is enough for keeping the mobile first approach. I was just getting distracted because I was trying to think of ways to make the menu easier for other people to use (I am working on a theme for developers, most who are barely getting into responsive design).
I am 90% done and after combining crunching code, there isn’t nearly as much code/complexity as I thought there would be. :P
@jurotek, Yeah, I hear Chris Coyer talk a lot about his Papa Bear/Baby Bear mixin on the ShopTalkShow Podcast which is pretty much what you are describing, but I haven’t adopted it yet. I just haven’t really seen the benefit of this method.
Lol, F&*# responsive menus with dropdowns, such a pain. :P