title: Can't click the button because of the overlay?
body: <p>This is the HTML</p>
  
  <pre><code>&lt;li id="nav1" class="navs"&gt;&lt;a unselectable="on" draggable="false" class="Navigation" href="http://youtube.com"&gt;YouTube&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>This is the CSS</p>
  
  <pre><code>.navs:after {
    content: "";
    position: absolute;
    top: 0;  left: 0;  right: 0;  bottom: 0;
    background: #0d0d0d;
    opacity: 0.5;
    transform: scaleY(0);
    transform-origin: 0 100%;
    transition: all .2s ease-out;
  }
  .navs:hover:after{
    transform: scaleY(1);
  }
  .navs:active:after{
      background: #FFFFFF;
  }
  </code></pre>
  
  <p>I think the reason why i can't click the button is because when i click the button, the overlay forms. I do not want to remove the overlay though. Is there any way to click through the overlay?</p>