title: Setting position of Navbar to fixed makes dropdown stop working
body: <p>I programmed a navbar for my website, and one of the items was a dropdown menu. The dropdown was working, but when I set the position of the navbar to fixed so that it will stay with the page even when you scroll down, the dropdown stops working.
  here is the before code</p>
  
  <pre><code>/*CSS*/
  body{
          font-family: Optima, Courier, Ariel;
          background-color:#000000;
          background-image: url('background.png');
          background-repeat: no-repeat;
          background-attachment: fixed;
          background-size: cover;
      }
      .navbar {
          overflow: hidden;
          background-color: #000000;
          max-height: 68px;
      }
  
      .navbar a {
          float: left;
          font-size: 25px;
          color: #00cc00;
          text-align: center;
          padding: 20px 40px;
          text-decoration: none;
      }
  
      .dropdown {
          float: left;
          overflow: hidden;
      }
  
      .dropdown .dropbtn {
          font-size: 25px;  
          border: none;
          outline: none;
          color: #00cc00;
          padding: 20px 40px;
          background-color: inherit;
          font-family: inherit;
          margin: 0;
      }
  
      .navbar a:hover, .dropdown:hover .dropbtn {
          background-color: #00cc00;
          color: #000000;
      }
  
      .dropdown-content {
          display: none;
          position: absolute;
          background-color: #00cc00;
          min-width: 160px;
          box-shadow: 0px 8px 16px 0px rgba(120,150,120,0.2);
          z-index: 1;
      }
  
      .dropdown-content a {
          float: none;
          color: #000000;
          padding: 12px 16px;
          text-decoration: none;
          display: block;
          text-align: left;
      }
  
      .dropdown-content a:hover {
          background-color: #000000;
          color: #00cc00
      }
  
      .dropdown:hover .dropdown-content {
          display: block;
      }
      div.centered{
          background-color:#111111;
          margin-left:10%;
          margin-right:10%;
          color:#00cc00;
      }
  </code></pre>
  
  <pre><code>&lt;!--HTML--&gt;
  &lt;body&gt;
      &lt;div class="navbar"&gt;
      &lt;a href="#home"&gt;&lt;img src="logo.png" width = "48" height = "32"&gt;&lt;/a&gt;
      &lt;a href="#home"&gt;Home&lt;/a&gt;
      &lt;div class="dropdown"&gt;
          &lt;button class="dropbtn"&gt;Dropdown &amp;#9660&lt;/button&gt;
          &lt;div class="dropdown-content"&gt;
              &lt;a href = "#item1"&gt;item1&lt;/a&gt;
              &lt;a href = "#item2"&gt;item2&lt;/a&gt;
              &lt;a href = "#item3"&gt;item3&lt;/a&gt;  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>then I only changed the css of the navbar to this</p>
  
  <pre><code>.navbar {
          overflow: hidden;
          background-color: #000000;
          max-height: 68px;
          position:fixed;
          top:0;
          left:0;
          right:0;
      }
  </code></pre>
  
  <p>When I made this change the navbar wasn't affected by scrolling, and it looked the same, but the dropdown stopped working.
  Is there a solution that allows me to keep both features?</p>