Wordpress navigation submenu shifts items to the right on hover

Question

I am working on a website developed in Wordpress that uses a three-depth navigation menu. The menu is automatically generated and consists of <li> and <ul> items. I am encountering a problem where list items shift to the right when a list containing a submenu is opened.

The site where this happens is the Dutch site http://www.skoll.nl/. I'm having trouble converting this to a JS-fiddle, but I'll try again tomorrow.

The problem

Whenever I hover on an item in the first submenu, the second submenu opens. Often, the items in this second submenu are larger than the item itself, causing the list item to expand and pushing other items to the right. This can be seen by navigating to "Informatie" and then "Evenementen". You can see that the item on the right shifts to the right, making it rather hard to click on.

I've spent numerous hours on this problem and haven't got any further, so the question I would like to be answered is: How do I stop the list items in the first submenu from shifting to the right, while preserving the current layout of the navigation menu? I am fine with both CSS- and JS-solutions.

Thanks in advance.

Answer 1

Add following style to li elements which contains for example 'Evenementen' link:

position: relative;

Then for submenus add following styles:

position: absolute;
left: 0;
top: 20px; /* this needs to be adjusted */

You may have to add some other styles too to make everything look like it looks now, but after this submenus wont shift items anymore.