Hola,
en primer lugar debes añadirle display: none; a #submenu para ocultarlo y despues debes cambiar el selector CSSque has pues to para hover.
Código CSS:
Ver original/*Esto es lo que tienes*/
#pro:hover #submenu{display: block; }
/*Esto es lo que debes poner*/
#pro:hover + #submenu{display: block; }
PD: De todas formas asi no funcionara bien, deberias cambiar la posicion de #pro, quitarlo del a y ponerlo en el li, y asi usando tu CSS funcionaria bien.
Código CSS:
Ver original#pro:hover #submenu{display: block; }
Saludos.