How do I prevent all menu items from adding style on:hover? - html

Question

Recently I have noticed that when you are styling menu item on:hover, some properties like text-shadow, color, background and and many others are applied to the menu item that is currently be hovered over.
However, it seems that the padding property is applied to all the menu items, not just the menu item being hovered over.
Here's an example: http://codepen.io/Bizzet/pen/LEvopq
.main-navigation a {
display: block;
text-decoration: none;
color: #fff;
font-size: 1.1em;
transition: 1s;
margin-bottom: -7px;
}
.main-navigation a:hover {
margin-bottom: 0;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
}
As you can see in Codepen, the text-shadow is applied to a single menu item while the padding is applied to all the elements.
What can I do to prevent this?
I only want one menu item to hover at once.

Answer 1

The padding is not being applied to all menu items. What's happening is that the height of the parent container is being expanded by the hover effect, and since the other menu items are top-aligned, they raise as well.
Try this:
.main-navigation a:hover {
...
margin-bottom: 0;
margin-top: -7px;
}
Demo

Answer 2

Problem
Your ul li a's have a negative margin-bottom initially.
When you hover over an a, though, you reset the margin-bottom to 0. This causes the box to grow in size and push the whole nav-bar upwards.
Insight
The padding is not being applied to all list items. One of the links in your nav boxes is pushing the whole navigation bar up, which gives the appearance of applying the padding to all list items.
Demo
Run this snippet for a demo. The menu-items are black.
header {
min-height: 10em;
background: rgba(0, 0, 0, 0.25);
position: relative;
}
h1 {
text-align: center;
}
.container {
background: green;
list-style: none;
position: absolute;
padding: 0;
margin: 0;
bottom: 0;
}
.container:after {
display: block;
content: '';
clear: both;
}
li {
float: left;
margin-right: 0.5em;
display: inline-block;
background: black;
position: relative;
}
span {
color: red;
margin-bottom: -0.75em;
display: block;
transition: all 3s;
}
span:hover {
margin-bottom: 0;
}
<header>
<h1>Title</h1>
<ul class="container">
<li class="item">
<span>Hello</span>
</li>
<li class="item">
<span>there</span>
</li>
<li class="item">
<span>friend</span>
</li>
</ul>
</header>
Solution
It should be noted that negative margins are usually not encouraged, unless you want element overlap. If it is necessary, it can be better to set a negative margin on 1 parent element than each individual child.
To hack this particular problem together, just replace this:
a:hover { margin: 0; }
with this:
a:hover { transform: translateY(-70%); }
Keep in mind that you might have to add -browser- prefixes to the transform rule. Browser support here