title: How to have dropdown working and keep nav bar at the top?
body: <p>I want to keep my nav bar at the top. When I use </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-html lang-html prettyprint-override"><code>position: fixed</code></pre>
  </div>
  </div>
  </p>
  
  <p>on the  tag, it keeps my nav bar at the top, however, it stops my drop-down working! </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>body {
    margin: 0;
  
  }
  h1 {
    color: navy;
    font-family: 'Nunito',sans-serif;
  }
  
  /*** NAVIGATION BAR ***/
  ul {
    list-style-type: none; /*Removes bulet points*/
    margin: 0; /*Removes browser default - sets to far left of page*/
    padding: 0; /*Removes browser default - sets to far left of page*/
    width: 100%; /*Width of the nav bar buttons*/
    background-color: black; /*Background colour of nav bar buttons #dddddd was #333 */ 
    overflow: hidden;
    top: 0;
    font-family: nunito;
    opacity: 0.8;
    position: fixed;
  }
  
  /*Sets a button to a colour
  .active{
    background-color: #4CAF50;
  }*/ 
  li {
    float: left;
  }
  
  li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  li a:hover, .dropdown:hover .dropbtn {
    background-color: red; /*Changes colour of active nav bar*/ 
  }
  
  li.dropdown {
    display: inline-block;
  }
  
  /*Drop Down Box*/ 
  .dropdown-content { /*This is the drop down box*/ 
    display: none;
    position: absolute;
    opacity: 1; 
    background-color: #333; /*Changes colour of drop down box (non-active)*/ 
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  .dropdown-content a {
    color: #9B9B9B;  /* Changes colour of text in drop down*/ 
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  
  /*Active Drop Down Box*/ 
  .dropdown-content a:hover { 
    background-color: #444; /*Changes colour of active drop-down box*/ 
    color: white; 
  }
  .dropdown:hover .dropdown-content {
    display: block;
  }
  /*** NAVIGATION BAR DONE ***/
  .main { /*main class*/
    margin-top: 50px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
   &lt;title&gt;Homepage&lt;/title&gt;
   &lt;link rel="stylesheet" type="text/css" href="Stylesheets/styles.css"&gt;
   &lt;link href="https://fonts.googleapis.com/css?family=Aleo|Indie+Flower|Nunito|Roboto" rel="stylesheet"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;!-- Nav Bar --&gt; 
    &lt;nav&gt;
      &lt;ul&gt;
        &lt;!-- Home --&gt; 
        &lt;li&gt;&lt;a class="active" href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt; 
        &lt;!-- News --&gt; 
        &lt;li class="dropdown"&gt;
         &lt;a href="#news" class="dropbtn"&gt;News&lt;/a&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;/li&gt;
        &lt;!-- Contact --&gt; 
        &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;    
        &lt;!-- About --&gt; 
        &lt;li style="float:right"&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
    &lt;!-- Main --&gt; 
    &lt;div class="main"&gt;
      &lt;h1&gt;TEST 4&lt;/h1&gt;&lt;p&gt;TEST 2&lt;/p&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Please help me fix - where do I need to move the position fixed to, such that my nav bar stays at the top, but so that my drop-down still works? </p>
  
  <p>....having to add extra comments because it wont let me post without "extra detail".....</p>
  
  <p>Thanks</p>