Problem with menu

Hi, I have a problem with menu on my newest website.
There are two site’s versions, first is for mobile, second swich on when resolution is min 768px. On mobile version when mouse pointer is on submenu its looks like on pictures below:

Code is here:

Thanks for all responses

In the desktop version, you put a question “Why does this <li> element moves down?” Do you mean, why does it shift down? If that is what you mean, it is because your “sub-menu-item” class definition has:

     padding: 10px 0;

The above will apply 10px of padding to the top and bottom of the submenu item. This causes the shift down effect in the desktop version and causes the extra brown gap at the bottom of the mobile version.