Как сделать смену изображения при ховере на ссылку?
На чистом CSS, без JS https://jsfiddle.net/b31Lr7fk/
Вместо цветов поставьте свои картинки.
Почитайте больше про иерархию селекторов. 
Вот это li a:hover .menu-img
Интерпритируется как <li>
  …
    <a :hover>
      …
        <element class="menu-img">
Потому ваши стили не применяются так как вы хотите.
Что касается самой задачи. При такой верстке я не знаю способа сделать то, что вы хотите без использования JavaScript