I'm struggling to figure out why only the white portion of my links is clickable. The links are designed as "3D" buttons using CSS rotate transitions, but I can't seem to fix the issue. Any assistance would be greatly appreciated!
Check out the codepen link.
Here is the HTML:
<nav>
<ul>
<li><a href="index.html" data-hover="Home">Home</a>
</li>
<li><a href="plans.html" class="current" data-hover="Plans">Plans</a>
</li>
<li><a href="#" data-hover="Forums">Forums</a>
</li>
<li><a href="team.html" data-hover="Team">Team</a>
</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(-90deg);
transform-origin: 50% 0px 0px;
}