overflow:hidden hiding borders but not the element that overflows - css

Question

I'm working on a header with a transition. But something is not working.
I made the ul 120px and li 60px.
And I gave the li:hover a translateY(-60px). So that it pops up when you hover over the li.
I want to hide the content that is overflowing until you hover over it. But it doesn't seem to work. It does hover hide the border of the li that is overflowing.
Does anybody know why?
thank you in advance!
<header>
<ul>
<li>
<a id="p1" href="#">Vibe</a>
<a id="p2" href="#">Vibe</a>
</li>
<li>
<a id="p1" href="#">Creations</a>
<a id="p2" href="#">Creations</a>
</li>
<li>
<a id="p1" href="#">Vision</a>
<a id="p2" href="#">Vision</a>
</li>
<li>
<a id="p1" href="#">Just tell us</a>
<a id="p2" href="#">Just tell us</a>
</li>
</ul>
</header>
And this is the css
header {
height: 60px;
width: 100%;
background-color: #34495e;
}
header ul {
margin-right: 20px;
float: right;
height: 60px;
overflow: hidden;
}
header ul li {
display: inline-block;
height: 120px;
padding-left: 40px;
padding-right: 40px;
overflow: hidden;
-webkit-transition: -webkit-transform 0.2s ease-in-out;
overflow: hidden;
border-left: 1px solid #2c3e50;
}
header ul li a {
text-decoration: none;
line-height: 60px;
font-size: 14px;
font-family: "lato", sans-serif;
font-weight: 700;
color: #e74c3c;
text-transform: uppercase;
-webkit-transform: rotate(10deg);
}
#p2 {
position: absolute;
text-align: center;
color: #c0392b;
line-height: 60px;
}
header ul li:hover {
-webkit-transform: translateY(-60px);
}

Answer 1

Add
position: relative;
To your ul class
Here is the jsfiddle http://jsfiddle.net/2jabu/

Answer 2

Here is one solution that may work for you:
Example Fiddle
First id's should be reserved for single uses. Your #p1 & #p2 would be better written as classes. To solve your problem you only need overflow:hidden; on the highest level container, in this case the header. Also since you've given #p2 absolute position, you also need to give the header position:relative;.
CSS:
header {
// existing styles
position: relative;
overflow: hidden;
}