title: Cannot click on links in div that is floating on another div
body: <p>I am having a bit of problem with my website:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      margin: 0;
      font-family: Tahoma;
      background-color: #000000;
      background-size: cover;
      background-attachment: fixed;
      color: #ffffff;
  }
  
  @keyframes fadein {
      from { opacity: 0; }
      to   { opacity: 1; }
  }
  
  #content {
      margin-top: 50px;
      animation: fadein 5s;
  }
  
  ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: rgba(0, 0, 0, 0.00);
      position: fixed;
      top: 0;
      width: 100%;
  }
  
  li {
      float: left;
  }
  
  li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
  }
  
  a {
      transition: all 0.5s;
  }
  
  /* Menu Bars */
  
  .section-1 {
      position: fixed;
      text-align: center;
      width: 25%;
      top: 20%;
   height: 60%; 
   float: left;
      display: block;
      z-index: 1;
      background-color: #000000;
  }
  
  .section-1:hover + .menu-1 {
      opacity: 1;
      transition: opacity 0.5s ease-in-out;
  }
  
  .menu-1 {
      position: fixed;
      text-align: center;
      width: 25%;
      top: 20%;
   height: 60%; 
   float: left;
      z-index: 2;
      background-color: rgba(255, 0, 0, 0.50);
      display: block;
      opacity: 0;
      transition: opacity 0.5s ease-in-out;
      pointer-events: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
      &lt;div id="navigation-menu"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="index.html"&gt;Title&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div id="content"&gt;
          &lt;div class="section-1"&gt;
              &lt;p&gt;Menu 1&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="menu-1"&gt;
              &lt;br /&gt;
              &lt;br /&gt;
              &lt;br /&gt;
              &lt;br /&gt;
              &lt;br /&gt;
              &lt;br /&gt;
              &lt;a href="#"&gt;Link 1&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see, the expected behavior is that when I hover the div with the "Menu 1" text, the div with the "Link 1" link appears and that the "Link 1" link is clickable which will direct the user to another page. However, the "Link 1" hyperlink is unclickable and instead, highlights the "Menu 1" text.</p>
  
  <p>How do I make it so that the "Like 1" hyperlink can be clicked?</p>