You are going to have to account for that space somehow when that div is display: none; and then remove it when it is displayed. So there is no shift in layout. Try adding some extra top padding to your #hover div, and then removing that padding on the same rollover that reveals the nav.
Hi chriscroyier –
I completely agree, extra padding needs to be added somewhere, …
Try adding some extra top padding to your #hover div, and then removing that padding on the same rollover that reveals the nav.
but where would that be?? I’ve tried adding extra padding to the #hover (in the first block of code) and all it does is make the space between the header and the content bigger, same jump when the hover over happens. Did you mean a change like this? (It makes absolutely no affect on the outcome btw)
<div id="hover" padding="30px 30px 30px 30px">
Unfortunately apostrophe’s recommendation to add the <li> back in, and fix the clear didn’t work. Thank you both for the advice, this has been stumping me for days!
that’s encouraging that you got it to work. I’m also in Firefox, but without the added benefit of
getting this to work, yet. When you say give it a fixed width do you mean like this?
Hopefully not, because this does not fix the problem for me.
It doesn’t make sense to do a ‘fixed’ padding like above, because that means its adding the 22px
top, left, bottom and right. Also, when the top and bottom padding is removed, it makes the rollover stop working completely. – so it doesn’t work to do this: padding: 0px 22px 0px 0px for instance.