CSS issue on sub-menu in wordpress

Hi,

I’m working on this: http://samcampsall.co.uk/DA/

As you can see there is a main nav menu with some links having sub-menus. I’ve suspended some CSS rules to make the sub menus visible and better illustrate my problem. (Normally the sub-menus will be positioned off screen and then moved into position using :hover. Alternatively, I could set them to display:none and display:block on :hover. If either of these is preferable to solve my issue then let me know!)

Basically any sub-menu adds height to the nav item below - in this instance the sub-menu for ‘Equipment’ is adding height to ‘The Guide’ button. I’ve moved the main nav links around in the menu and they always cause this issue. The height added is equal to the height of the offending sub-menu.

This makes me think this may be something to do with how I’ve set the sub-menu’s position? This is the first time I’ve set up a pop-up sub-menu type thing, so not sure what I’ve done wrong or how best to remedy it.

Any help gratefully received!

The preferred way to hide/show is to set the coordinates as such (perhaps like top:100%;left:0;, something where it’s not actually hidden) and then hide it via a negative left margin, aka margin-left:-999em;, and on hover set that to 0.

They are also normally position:absolute’d as to remove the dropdown from the flow of the documenet. Right now they are floated. Try changing up your ways to AP and make sure the parent <li> has position:relative so it has something to base off of :).

Hey Ryan,

I think you gave me some advice on this last time I was working on it - thanks again for your input.

Try changing up your ways to AP and make sure the parent <li> has position:relative so it has something to base off of

This is what I was missing - I had the position:relative on ‘.menu li a’, not on ‘.menu li’. I’ve added this and it works a treat now! I’m having such a terrible day making this work has cheered me right up - thanks again man :slight_smile:

You’re welcome buddy :). Glad I could help. Just remember the relative position hasto be the parent (direct or not) and not an adjacent child.