Question

I’m trying to work on a layout and I have an issue with the navigation. If you look on the Codepen posted below and hover over the ‘Home’ link in the navigation, the drop-down menu will appear and it will push the other main links to the left. What is causing this and how can I fix it? I’ve been messing with it for a couple hours and I’m lost. Thanks for any help.

http://codepen.io/anon/pen/Cmcyr

Answer 1

There’s no width being set on the a, ul or lis, so when the ul is displayed, the parent is expanding to the width of its widest child.

Remove the horizontal padding from the lis and set text-align: center; and give them or their parent (ul) a max-width the same size or narrower than its parent (a).