Question

My website (http://www.oia.co.za/schedules/) has a horizontal navigation menu with dropdowns on hover, and the darn thing shifts the neighbouring list-item the width of the dropdown on hover.

I can’t for the life of me figure out what the problem is, and my eyes are square from looking at the CSS all night.

I know it is something stupidly simple, and I’ve just looked at it for too long…

Answer 1

You could try updating the dropdown ul to be absolutely positioned:

#top_navigation ul.sub-menu {
    display: none;
    margin-top: 0;
    position: absolute;
    top: 50px;
}

#top_navigation ul {
    overflow: visible;
}