How do I stop the sub-menu transitioning in (height) instead of just appearing?

[RachelGibbons]

I have adapted the Magazine theme to have a full width sub-menu with the sub-menu items in columns. The default appears to be to unfold the sub-menu down using a height transition, but because of the columns the words appear to flicker as the first two items first appear at the top, then get moved to second row, then third.

I have stopped this happening with:
.nav-primary .sub-menu a:hover {
transition: height 0s;
}
But it only works the first time you hover over the menu item. Subsequent times, it folds down again with the flickering.

This didn't work:
.nav-primary .sub-menu a:visited,
.nav-primary .sub-menu a:hover {
transition: height 0s;
}

Can anyone help? Thanks

Note that there's currently a maintenance page for not logged-in users, so to look you would need to login:
Username: Temp
Password: svvvcziiMf2oGEGe67PaJwrI

http://www.penistoneleisurecentre.org.uk

[Anita]

That login information doesn't work.

---

Love coffee, chocolate and my Bella!

[RachelGibbons]

Very sorry, it does now:
Username: Temp21
Password: svvvcziiMf2oGEGe67PaJwrI

Thanks,
Rachel

[Author]

Posts