Pasa que tus media-queries no conocen la existencia de tus rollovers.
Opciones:
Trabajar con la pseudo-clase :hover directamente en tu/s hoja/s de estilos
Trabajar con javascript pero de manera que quites todo el javascript del html, es decír, usando dom y funciones, o bien con una librería como jquery que te ayudará bastante a la hora de seleccionar elementos, y luego detectes resoluciones, en jquery te valdrá
http://api.jquery.com/resize/
Saludos.