The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Menu hover effect causes unwanted movement

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #175771

    Hello, I am a new coder so forgive me if this is a simple issue. I have googled my issue numerous times and I cant find exactly what Im looking for. Im guessing its because I do not have the correct terminology to find my answer…

    Anyways.. I want to include a hover effect for each of my menu items. When I hover over each item I want the text to be enlarged (120%) and the I want a colored box to be shown. I also want the hover box to be wider and taller than my text. I got all of that to work. But my problem is that when I hover over each item, the padding causes the other menu items to move over and also the menu bar to increase in height. I want everything else to stay still while I hover, just the text of the item Im hovering on to be enlarged.

    Here is my code that I am working with:

    Any tips?

    Thanks a bunch!


    You’ll have to make sure that the hoverable item has position:absolute;.

    Items with absolute positioning won’t have any effect on other elements on the page, so their size/position won’t disrupt other items.

    But, in order to make that work, the parent of the hoverable items has to have position:relative; so you can position properly. Check out this 6-year old (but still relevant) article how that works:


    @Senff, So I am still trying to get the terminology down.. What do you mean the “parent of the hoverable item”? Is that the .menu ul?

    In my code, I put the position: absolute; line in the li and the position: relative; in the .menu ul but that didnt work and when I tried to put the position: relative; in the a:hover section it just freaked out.

    I think I understand the absolute/relative concept, but Im not sure where to incorporate it in my code to make it work as I want it to.


    @Senff, This is what I did and The other menu items are still moving out of the way… Im guessing I just wrote the new lines in the wrong place?

    On another note, I saw in another thread where you explained how to have a sticky menu after scrolling. I incorporated the JS that you posted but Im not sure why its not working. I am using the tag .menu ul and I changed the Js to incorporate that instead of ‘.menu’. Is that not right? Im having a hard time with understanding JS so Im sorry if thats totally wrong.


    @wolfcry911 THANK YOU! I had no idea that you had to actually load the Jquery library like that… OOPS! Is there a way to make the menu fixed to be flush with the top of the screen instead of having the slight gap?

    On the position: absolute, if I put a semi-colon after the absolute instead of a comma it made the menu all funky and mess up, but it worked if I left the comma after absolute like this:

    position: absolute, top 20px; left 20px;

    Thats what you meant right?

    If I want to increase the font size when I hover, the menu bar increases its height. How can I fix this? I thought the absolute and relative positioning would fix this..

    Also, How can I clean up my code and make it more efficient?

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.