title: Making navbar sticky makes dropdown-content dissapear
body: <p>I made a navbar for a project of mine. I am trying to make it sticky, but when I do that the dropdown-content of the button dissapears.</p>
  
  <p>I would like to stay with only css and html, but if it requires some javascript that's fine too (javascript frameworks please only if you don't know the native javascript code).</p>
  
  <p>To make it sticky I added <code>position: sticky; top: 0; z-index: 1;</code> to <code>nav</code>.</p>
  
  <pre class="lang-css prettyprint-override"><code>nav {
      position: sticky;
      top: 0;
      z-index: 1;
      width: 100%;
      font-size: 1.1em;
      overflow: hidden;
      background-color: #F05;
          /* horizontally center */
          display: flex;
          justify-content: center;
  }
  nav a {
      font-weight: bold;
      float: left;
      color: #000;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
  }
  nav div {
      float: left;
      overflow: hidden;
  }
  nav div button {
      line-height: inherit;
      font-weight: bold;
      border: none;
      outline: none;
      color: #000;
      padding: 14px 16px;
      font-size: 1em;
      background-color: inherit;
      font-family: inherit;
  }
  nav a:hover, nav div button:hover {
      background-color: #d40037;
  }
  nav div div {
      box-shadow: 0px 0px 10px 0px rgba(212,0,57,0.5);
      display: none;
      position: absolute;
      background-color: #303030;
      border-bottom: 1px solid #d40037;
      border-right: 1px solid #d40037;
      border-left: 1px solid #d40037;
      min-width: 160px;
      z-index: 1;
  }
  nav div div a {
      font-weight: normal;
      float: none;
      color: #DDD;
      padding: 12px 14px;
      text-decoration: none;
      display: block;
      text-align: left;
  }
  nav div div a:hover {
      background-color: #1E1E1E;
  }
  nav div:hover &gt; div {
      display: block;
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
     &lt;meta charset="utf-8"&gt;
     &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
     &lt;title&gt;HTML und CSS | Grundlagen&lt;/title&gt;
     &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;
     &lt;link rel="icon" href="img/logo.png"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
     &lt;header&gt;Grundlagen&lt;/header&gt;
  
     &lt;nav&gt;
        &lt;a href="index.html"&gt;Index&lt;/a&gt;
        &lt;div&gt;
           &lt;button&gt;Wissenschaften&lt;/button&gt;
           &lt;div&gt;
              &lt;a href="mathe.html"&gt;Mathe&lt;/a&gt;
              &lt;a href="physik.html"&gt;Physik&lt;/a&gt;
              &lt;a href="chemie.html"&gt;Chemie&lt;/a&gt;
           &lt;/div&gt;
        &lt;/div&gt;
        &lt;div&gt;
           &lt;button&gt;Sprachen&lt;/button&gt;
           &lt;div&gt;
              &lt;a href="deutsch.html"&gt;Deutsch&lt;/a&gt;
              &lt;a href="englisch.html"&gt;Englisch&lt;/a&gt;
           &lt;/div&gt;
        &lt;/div&gt;
        &lt;div&gt;
           &lt;button&gt;IT&lt;/button&gt;
           &lt;div&gt;
              &lt;a href="csharp.html"&gt;C#&lt;/a&gt;
              &lt;a href="javascript:void(0)"&gt;HTML und CSS&lt;/a&gt;
              &lt;a href="netzwerktechnik.html"&gt;Netzwerktechnik&lt;/a&gt;
              &lt;a href="elektrotechnik.html"&gt;Elektrotechnik&lt;/a&gt;
           &lt;/div&gt;
        &lt;/div&gt;
        &lt;div&gt;
           &lt;button&gt;Sonstige Fächer&lt;/button&gt;
           &lt;div&gt;
              &lt;a href="geografie.html"&gt;Geografie&lt;/a&gt;
           &lt;/div&gt;
        &lt;/div&gt;
     &lt;/nav&gt;
  
     &lt;main&gt;
  
     ...
  
     &lt;/main&gt;
  
     &lt;a href="#"&gt;&lt;footer&gt;Top&lt;/footer&gt;&lt;/a&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>