Buenas, mi problema es el siguiente, tengo un menu desplegable para web tal que asi:
Y luego en la versión movil se ve asi:
El motivo es la etiqueta :hover css:
#navigation li:hover > ul li {
opacity: 1;
height: 36px;
line-height: 36px;
overflow: visible;
padding: 0;
}
¿Alguna sugerencia para eliminar esta clase cuando entre en una versión tablet/movil? Un saludo 
mediaqueries? siento no ser más explicativo pero lo único que se es que sirven para "modificar" css dependiendo del dispositivo, no hice mucho caso en clase xD
hazlo con una media query para que cuando pase de cierto tamaño pues le quitas lo que quieras:
@media (min-width:375px) and (max-width:414px) {
#navigation li:hover > ul li {
opacity: 1;
height: 36px;
line-height: 36px;
overflow: visible;
padding: 0;
}
}
Puse dos tamaños random ahí entre esos tamaño tendrías otra clase
Muchisimas gracias a todos, ya lo solucione, ya tenia una clase @media por ahi solo que tengo el less mas desordenado que la hostia.
De todas formas, dudo mucho que en un móvil se ejecute el evento hover en css, pero si, con los @media-queries como te dijo #4 se puede solucionar.
#6 En movil tienes que pinchar encima y se te desplegaba el boton, quedaba muy feo y bueno el css y yo precisamente no nos llevamos bien 
El hover en dispositivos móviles no funciona únicamente el evento click. Crea un jquery o un js con una función onclick que te despliegue el menu. Yo lo que haría seria una función onclick que me muestre o oculte la capa para dispositivos móviles y para desktop dejaría el hover.
#8 He dejado el hover en la version normal pero lo he modificado en versión moviles.
Ya cree una función que me controlase si estaba usandose desde un dispositivo tactil o ordenador, se ha quedado igual que en las imagenes solo que ya no se despliega el menu en moviles siguiendo los pasos del compañero #4
#9 para hacer responsive es lo que uso, de hecho te recomiendo que hagas movile first y vayas aumentando tamaño, te quedarán webs mucho mejor y menos trabajo arreglando cosas 