CSS rotate making links unclickable unless double clicking - html

Question

I can't seem to find the issue that is causing my links to only be clicked on the white portion. It's a "3D" button by that, I mean it is a link with CSS rotate transitions. I'm not able to find any solutions so I'm looking for some help!
Here's the codepen link.
HTML:
<nav>
<ul>
<li>Home
</li>
<li>Plans
</li>
<li>Forums
</li>
<li>Team
</li>
</ul>
</nav>
CSS
* {
box-sizing: border-box;
}
nav {
background: #e9e9e9;
margin: -1rem 0rem;
z-index: 0;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline-block;
text-transform: uppercase;
font-size: 1.5rem;
letter-spacing: 0.05rem;
}
nav ul li a {
display: inline-block;
padding: 1rem;
color: #000;
text-decoration: none;
transition: transform 0.3s ease 0s;
transform-origin: 50% 0px 0px;
transform-style: preserve-3d;
}
nav ul li a.current {
color: #ffc400;
}
nav ul li a: hover {
background: #e9e9e9;
color: #000;
transform: rotateX(90deg) translateY(-22px);
}
nav ul li a::before {
position: absolute;
top: 100%;
left: 0px;
width: 100%;
padding: 4px 0px;
text-align: center;
line-height: 50px;
background: none repeat scroll 0% 0% #ffc400;
color: #FFF;
content: attr(data-hover);
transition: #ffc400 0.3s ease 0s;
transform: rotateX(-90 deg);
transform -origin: 50% 0px 0px;
}

Answer 1

Well the issue is that you're translating the link out of view so it cannot be clicked:
nav ul li a:hover {
background: #e9e9e9;
color: #000;
transform: rotateX(90deg) translateY(-22px);
}
The dead simple solution to this problem would be simply put an a element around the li element and change the current a element to a div, like so:
This way, the div and li elements that are being translated and rotated are surrounded by the clickable link.
<a href="#">
<li>
<div data-hover="Forums">Forums</div>
</li>
</a>
CSS:
* {
box-sizing: border-box;
}
nav {
background: #e9e9e9;
margin: -1rem 0rem;
z-index: 0;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline-block;
text-transform: uppercase;
font-size: 1.5rem;
letter-spacing: 0.05rem;
}
nav ul li div {
display: inline-block;
padding: 1rem;
color: #000;
text-decoration: none;
transition: transform 0.3s ease 0s;
transform-origin: 50% 0px 0px;
transform-style: preserve-3d;
}
nav ul li div.current {
color: #ffc400;
}
nav ul li div:hover {
background: #e9e9e9;
color: #000;
transform: rotateX(90deg) translateY(-22px);
}
nav ul li div::before {
position: absolute;
top: 100%;
left: 0px;
width: 100%;
padding: 4px 0px;
text-align: center;
line-height: 50px;
background: none repeat scroll 0% 0% #ffc400;
color: #FFF;
content: attr(data-hover);
transition: #ffc400 0.3s ease 0s;
transform: rotateX(-90deg);
transform-origin: 50% 0px 0px;
}
And then adding a element styling to make everything work out:
nav ul a {
text-decoration: none;
}
Here's the updated pen.