overflow:hidden hiding borders but not the element that overflows

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

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;
}

Answer 2

Add

position: relative;

To your ul class

Here is the jsfiddle http://jsfiddle.net/2jabu/