title: Strange subnav buttons bug
body: <p>I have this sub navigation bar bug thats kind of hard to explain but basically i have a bar at the top with 5 categories and only one of them has a sub navigation bar.  I have the whole bar set to fill 100% of the screen with each button filling 20% and this works fine for each button except the button with the sub navigation pages on it.  If you open up this html code im sending tou will see what I mean.  I have no clue whats going on here.</p>
  
  <p>ive tried deleting certain parts to see whats causing the problem and ive tried switching the whole nav bar from body to head to see if that did anything and ive played around with the css alot but nothing is working.</p>
  
  <p>Codesnippet:</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>/* The navigation menu */
  .navbar {
    overflow: hidden;
    background-color: #333;
  }
  
  /* Navigation links */
  .navbar a {
    float: left;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  /* The subnavigation menu */
  .subnav {
    float: left;
    overflow: hidden;
  }
  
  /* Subnav button */
  .subnav .subnavbtn {
    font-size: 16px; 
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
  
  }
  .navbar a:hover, .subnav:hover .subnavbtn {
    background-color: green;
  }
  
  .subnav-content {
    display: none;
    position: absolute;
  
    background-color: green;
    z-index: 1;
  }
  
  .subnav-content a {
  
    color: white;
    text-decoration: none;
  }
  
  
  .subnav-content a:hover {
    background-color: #eee;
    color: black;
  }
  
  
  .subnav:hover .subnav-content {
    display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="navbar" style="width 100%"&gt;
    &lt;a href="HOME.html"style="width:20%"&gt;Home&lt;/a&gt;
    &lt;a href="ABOUT.html"style="width:20%"&gt;About&lt;/a&gt; 
    &lt;a href="MEDIA.html"style="width:20%"&gt;Media&lt;/a&gt;
    &lt;div class="subnav"&gt;
      &lt;button class="subnavbtn" style="width:20%"&gt;OtherGames&lt;/button&gt;
      &lt;div class="subnav-content"&gt;
        &lt;a href="subHL.html"&gt;Half Life&lt;/a&gt;
        &lt;a href="subTF2.html"&gt;Team Fortress 2&lt;/a&gt;
        &lt;a href="subCS.html"&gt;Counter strike: Global Offensive&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
     &lt;a href="ACCOUNT.html" Style="width:20%"&gt;Account&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>