title: Preventing a hover effect that is triggering from the wrong element
body: <p>The .dropbtn button has styling attached to it so that when it is hovered over it shows the .dropdown-content div by adding opacity to that element. However, hovering over the spot below the button where the .dropdown-content appears seems to trigger the hover that should only be happening when I hover over .dropbtn. Why is this happening? </p>
  
  <p>There are some "solutions" like adding overflow:hidden to the .dropdown and adding it back with the hover, but it effects the transform I have attached to the .dropdown-content. Adding display:none and display:block to .dropdown content also breaks the transform effect I want.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
   font-family:sans-serif;
  }
  body {
   background-image:linear-gradient(to right,#42b4ce,#fd3838);
  }
  .dropbtn {
    background:none;
    color: white;
    font-size: 16px;
    border: none;
    cursor:pointer;
    padding:0 0 10px;
  }
  
  .dropdown {
    position: relative;
    width: 160px;
    margin: 0 auto;
    display: block;
    
  }
  
  .dropdown-content {
    opacity:0;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 400px;
    right:-80px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: -1;
    transform-origin: top center;
    transform:rotate3d(-40, 4, 1.5, 45deg);
    transition:.2s;
    border-radius:10px;
  }
  
  .dropdown-content a {
    color: black;
    padding: 10px 14px;
    text-decoration: none;
    display: block;
  }
  
  .dropdown-content a:hover {color: purple;}
  
  .dropdown:hover .dropdown-content {
   opacity:1;
   transform:rotate3d(0, 0, 0, 40deg);
   z-index:0;
  }
  
  .dropdown:hover .dropbtn {text-shadow:1px 1px 2px rgba(0,0,0,0.6)};</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div class="dropdown"&gt;
        &lt;button class="dropbtn"&gt;Dropdown&lt;/button&gt;
        &lt;div class="dropdown-content"&gt;
          &lt;a href="#"&gt;Link 1&lt;/a&gt;
          &lt;a href="#"&gt;Link 2&lt;/a&gt;
          &lt;a href="#"&gt;Link 3&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>