title: how do I make a drop down menu show over scroll down page?
body: <p>Sorry if this has been asked before, but I couldn't find an answer that worked.</p>
  
  <p>The drop down menu in the navbar shows when the bar is ontop, but it doesn't when I scroll down the page.</p>
  
  <p>How do I make the dropdown menu show above the text of the page when is scrolled? </p>
  
  <p>here's the code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;style&gt;
  body {
  margin: 0;
  font-size: 28px;
  font-family: Arial, Helvetica, sans-serif;
  }
  
  .header {
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
  }
  
  #navbar {
  overflow: hidden;
  background-color: #333;
  } 
  
  #navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  }
  
  #navbar a:hover {
  background-color: #ddd;
  color: black; 
  }
  
  #navbar a.active {
  background-color: red;
  color: white;
  }
  
  .content {
  padding: 16px;
  }
  
  .sticky {
  position: fixed;
  top: 0;
  width: 100%;
  }
  
  .sticky + .content {
  padding-top: 60px;
  }
  
  /* The dropdown container */
  .dropdown {
  float: left;
  overflow: hidden;
  }
  
  /* Dropdown button */
  .dropdown .dropbtn {
  font-size: 17px; 
  border: none;
  outline: none;
  color: #f2f2f2;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones 
  */
  margin: 0; /* Important for vertical align on mobile phones */
  }
  
  /* Add a red background color to navbar links on hover */
  .navbar a:hover, .dropdown:hover .dropbtn {
  background-color: #ddd;
  color: black;
  }
  
  /* Dropdown content (hidden by default) */
  .dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 10;
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  }
  
  /* Add a grey background color to dropdown links on hover */
  .dropdown-content a:hover {
  background-color: #ddd;
  }
  
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {
  display: block;
  }
  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="header"&gt;
  &lt;h2&gt;Scroll Down&lt;/h2&gt;
  &lt;p&gt;Scroll down to see the sticky effect.&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="navbar"&gt;
  &lt;a class="active" href="javascript:void(0)"&gt;Home&lt;/a&gt;
  &lt;a href="javascript:void(0)"&gt;News&lt;/a&gt;
  &lt;a href="javascript:void(0)"&gt;Contact&lt;/a&gt;
  &lt;div class="dropdown"&gt;
  &lt;button class="dropbtn"&gt;Dropdown 
  &lt;i class="fa fa-caret-down"&gt;&lt;/i&gt;
  &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;/div&gt;
  
  &lt;div class="content"&gt;
  &lt;h3&gt;Sticky Navigation Example&lt;/h3&gt;
  &lt;p&gt;The navbar will stick to the top when you reach its scroll 
  position.&lt;/p&gt;
  &lt;p&gt;Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum 
  definitiones no quo, maluisset concludaturque et eum, altera fabulas 
  ut 
  quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. 
  Affert 
  laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no 
  molestiae voluptatibus.&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  window.onscroll = function() {myFunction()};
  
  var navbar = document.getElementById("navbar");
  var sticky = navbar.offsetTop;
  
  function myFunction() {
  if (window.pageYOffset &gt;= sticky) {
  navbar.classList.add("sticky")
  } else {
  navbar.classList.remove("sticky");
  }
  }
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I'm a total beginner so thanks for your help.</p>