Problem with menu

Problem with menu
0.0 0

#1

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:

http://res.cloudinary.com/dfq4nbqi8/image/upload/v1516230785/rwd_hover_menu_onwekx.png

http://res.cloudinary.com/dfq4nbqi8/image/upload/v1516230785/normal_dg6gzd.png

Code is here: https://codepen.io/AdeX/pen/PEBVzO

Thanks for all responses


#2

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.