0

I have a CSS menu here http://www.salvationarmyqc.org/

When I hover the mouse over the menu, it shifts but only the first time a hover event occurs.

After that, it doesn't move.

I can't figure out why this is happening.

3
  • I just noticed that in IE10 it moves every time it's hovered. In Chrome, just the first time.
    – Shawn
    Jun 13, 2013 at 22:38
  • Why oh why are you loading that entire menu as JS on runtime? You're KILLING your Google ranking by hiding all relevant links on your site, and probably causing this problem along with it. Jun 14, 2013 at 0:35
  • I do this all the time. That way if I need to make a change to the navigation I just change it once. It's never causes an issue before as far as moving the menu.
    – Shawn
    Jun 14, 2013 at 23:26

2 Answers 2

0

Are you able to post your css?

By the looks of it, you are setting a border width on hover which pushes the menu item down. You might try using absolute positioning, and adjusting the top height by -1 or a similar value.

for example your css might look something like.

#listContainer{position:relative;}
.listItem{position:absolute;top:0;}
.listItem:hover{top:-1;}

Im not sure why the entire navigation menu moves down in chrome without seeing your css.

2
  • the css is too long to post but it's here: salvationarmyqc.org/css/nav.css
    – Shawn
    Jun 14, 2013 at 23:25
  • thanks. I replaced every instance of border-width:2px 0 0 0; with border-width:-1px 0 0 0; and that did the trick. thanks
    – Shawn
    Jun 17, 2013 at 14:41
0

your #navigation is jumping from a height of 34 to 36px. you could statically set it to 34pixels or put padding and margin to 0 for all of the li's.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.