title: Div not displaying correctly as submenu of a nav
body: <p>Now the nav doesn't display as it should in this example when in full screen but it show correctly when in iPad mode on chrome, so for my purposes this will work.</p>
  
  <p>I have totally made a submenu that pops out from the top nav before but for what ever reason this one has me stumped.</p>
  
  <p>first I thought well duh! You need to change <code>hoverableMenu{position:absolute};</code></p>
  
  <p>and <code>hoverable{position:relative};</code></p>
  
  <p>and viola I would be done. However no matter what I do it either goes all the way to the left when I have <code>float:left;</code> and even if I wanted to I could hardcode the position using margin, but thats not an elegant solution and I know that in all honesty it is merely something that is flying over my head.</p>
  
  <p>any and all help is appreciated. </p>
  
  <p>Below is my minimum verifiable example.</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-js lang-js prettyprint-override"><code>function myFunction() {
      var x = document.getElementById("myTopnav");
      if (x.className === "topnav") {
          x.className += " responsive";
      } else {
          x.className = "topnav";
      }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
  margin: 0px;
  background-color: lightblue;
  height: 100%;
  }
  header{
      /*This is for the header picture background*/
      background-size: 100%;
      background-image: url(resources/chem3D.png);
      background-repeat: no-repeat;
      /* vh = viewheight. Used in place of percentages when percentages don't seem to work. This is basically 30% but not really
      https://stackoverflow.com/questions/31039979/css-units-what-is-the-difference-between-vh-vw-and */
      min-height: 100%; 
  }
  /*Seperate the header from the content*/
  #seperator{
      height: 10px;
      background-color: black;
      margin:0;
      padding:0;
  }
  
  /*THe main content of the site. Where the Flex magic happens.*/
  #content{
      display: flex;
      margin: auto;
      height: auto;
  }
  
  /*Navigation Stuffs*/
  nav{
      width: 200px;
  }
  
  
  .topnav{
      overflow: hidden;
  }
  
  
  /*style of links in nav*/
  /* ADDED FLOAT LEFT */
  .topnav a{
      float: left;
      display: block;
      color: black;
      text-align: center;
      padding: 10px 5px 10px 15px;
      text-decoration: none;
      font-size: 1.2em;
      letter-spacing: 0.1em;
  }
  
  /* Drop down menu */
  a.hoverable:focus + div.hoverableMenu{
  display: block;
  float: left;
  }
  
  a.hoverable:hover{
      color:black;
  }
  div.hoverableMenu{
      display: none;
      width: 70%;
      margin-left:auto;
      margin-right:10px;
  }
  
  div.hoverableMenu&gt;a{
      letter-spacing: 0em;
  }
  div.hoverableMenu:focus{
      display: block;
  }
  
  /*Mobile views*/
   /*Tablet View*/
   @media screen and (max-width: 900px){
  #seperator{
      display: none;
  }
  #content{
      height: 100%;
      display:flex;
      flex-wrap: wrap;
  }
  
  nav{
      width: 100%;
      flex-basis: 100%;
  }
  .topnav a{
      float: left;
  }
  
  main{
      width: 50%;
  }
  
  header{
      display:none;
  }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="seperator"&gt;&lt;/div&gt;
  &lt;div id="content"&gt;
      &lt;nav&gt;
          &lt;div class="topnav" id="myTopnav"&gt;
  
              &lt;a href="index.html"&gt;Home&lt;/a&gt;
              &lt;a href="teaching.html"&gt;Teaching&lt;/a&gt;
  
              &lt;a class="hoverable" href="#"&gt;Research &lt;i class="fa fa-caret-down"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;div class="hoverableMenu"&gt;
                  &lt;a href="research.html"&gt;Overview&lt;/a&gt;
                  &lt;a href="publications.html"&gt;Publications&lt;/a&gt;
              &lt;/div&gt;
  
              &lt;a class="hoverable" href="#"&gt;Students &lt;i class="fa fa-caret-down"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;div class="hoverableMenu"&gt;
                  &lt;a href="studentawards.html"&gt;Awards&lt;/a&gt;
                  &lt;a href="gallery.html"&gt;Gallery&lt;/a&gt;
              &lt;/div&gt;
              &lt;a href="contact.html"&gt;Contact&lt;/a&gt;
              &lt;a href="javascript:void(0);" class="icon" onclick="myFunction()"&gt;
                  &lt;i class="fa fa-bars"&gt;&lt;/i&gt;
              &lt;/a&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/3xrntjbw/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <p>resources I accessed:
  <br>
  <a href="https://jsfiddle.net/davidpauljunior/pdcAF/1/" rel="nofollow noreferrer">https://jsfiddle.net/davidpauljunior/pdcAF/1/</a>
  <br>
  <a href="https://stackoverflow.com/questions/24882692/how-to-make-sub-menu-float-over-div">How to make sub menu float over div?</a>
  <br>
  <a href="https://stackoverflow.com/questions/39432813/cant-click-on-menu-links-in-drop-down-menu">Can&#39;t click on menu links in drop down menu</a></p>
  
  <p><strong>EDIT</strong>
  Under my media query I change the following. <br></p>
  
  <pre><code>div.hoverable{
      display: relative;
  }
  
  div.hoverableMenu{
      float:right;
      display: absolute;
  }
  
  div.hoverable:focus &gt; div.hoverableMenu{
      top:1em;
      left: 140px;
      z-index: 99;
  }
  </code></pre>
  
  <p>after doing this the menus are now popping up relative to their parents but they are causing the elements to the right of them to wrap around to under the rest of the nave items. Instead of the sub menu floating over the nav. :(</p>