Unwanted move while hovering

HTML & CSS
1

See this pen please:
http://codepen.io/mojtabaavahdati/pen/Mejrap
My problem is that when I hover my mouse on one of the menu items, all of them move! How can I avoid this? I only want one of them to have a few top pixels increase.
Interestingly, The problem doesn’t happen when I use the padding-bottom instead of top!
Thoughts?
Thanks.

2

Are you sure about that? Or are you just not seeing it because the page is sparse on content?

eg. try changing the CCS to have


ol {
  outline: 1px solid #F00;
}
#navbar ol li:hover {
  padding-bottom:45px;
}
1 Like
3

You’re right. I got you’re point.
But what is the reason for that? I am only placing my cursor on one of them. Is “hover” working properly? What should I do to avoid affecting of other blocks?
Thanks.

4

Hi there mojtabaavahdati,

if you want the elements to still expand
upwards rather than downwards try this…

[code]

untitled document

#masthead {
padding:1px 0 56px;
background-color:#24275a;
}
#masthead li{
list-style: none;
display: inline-block;
width: 90px;
margin: 50px 1px 1px;
background-color: #fff;
text-align: center;
padding: 35px 0;
transition: 0.4s ease-in-out;
}
#masthead li:hover{
padding-top: 45px;
margin-top: 40px;
}
#masthead a {
text-decoration:none;
color: #000;
font-family: tahoma;
font-size: 13px;
}

[/code]

coothead

1 Like
5

This is perfect! I appreciate your help.
But do I guess right? You are changing the margin-top while hovering so that some space is freed up for the ordered padding, in a way that the bottom border is not pressured to move down. Yes?
Thanks.

1 Like
6
  1. Yes
  2. Yes
  3. No problem, you’re very welcome. :sunglasses:

coothead

1 Like
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.