CODEWITHSUNDEEP
htmlcssdrop-down-menu
gillespieza
gillespieza

Reputation: 146

Why does my dropdown menu shift on hover?

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...

Upvotes: 0

Views: 1683

Answers (2)

sandeep
sandeep

Reputation: 92803

Give position:absolute to your Dropdown UL. Write like this:

    .menu-item{position:relative}

.sub-menu{
 position:absolute;
 top:30px;
 left:0;
}

Upvotes: 3

Joel Eckroth
Joel Eckroth

Reputation: 2534

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;
}

Upvotes: 1

Related Questions