Question

I’ve made a horizontal menu.

What it should be doing is having the elements under it line up along the right side in an orderly fashion. Instead, it jumps throughout page seemingly randomly, and has other issues such as flickering. I’ve been stuck on making it for awhile and would love some tips to resolve these issues. Here is a JS FIDDLE showing the issue, all stripped down.

Thanks.

Here are current issues:

• The submenu does not align perfectly with the right side of main nav even though its offset is calculated by main navs offset + width.

• Flickering(Moderately solved using large borders)

• Elements sometimes doesn’t catch mouseover, to reproduce I am moving my mouse all the way down and off and up it and off

• The menu slide out part goes to the bottom right of the page, in a somewhat random order, and continues to move further away (yikes)

Answer 1

The solution to the flickering issue is to make the submenu items overlap or touch. This can be done by adding a one-pixel white border to the menu item.

When it comes to the alignment issue (which could have been intended), you need to add (twice) the element’s padding and border as the width is inside the padding.