Overflow: hidden hidden borders, but not an element that overflows

Question

I am working on a heading with a transition. But something is not working.

I made ul 120px and li 60px. And I gave li: hover the translateY (-60px). So that it pops up when you hover over whether.

I want to hide content that overflows until you hover it. But it doesn't seem to work. He visits hiding the border whether that is crowded.

Does anyone 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 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 might work for you:

Script example

. # p1 # p2 . , overflow:hidden; , . , #p2, position:relative;.

CSS

header {
  // existing styles

  position: relative;
  overflow: hidden;
}

Answer 2

position: relative;

ul

jsfiddle http://jsfiddle.net/2jabu/