title: CSS - Dropdown Sub-Menu not correctly aligning below parent button even with absolute positioning
body: <p>Title fairly explanatory.</p>
  
  <p>My dropdown submenus are not aligning exactly to the bottom of the parent list item element.</p>
  
  <p>The li has a relative position, and the submenu has an absolute position, and I've tried positioning the submenus 100% from the top of the parent, which makes it appear about half way down the parent li. Equally, I've tried using top 175%, which works fine on my screens, but not on others. Surely setting it to be 100% from the top of the parent should be 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>@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700");
  body,
  html {
    font-family: 'Open Sans';
  }
  
  nav {
    position: relative;
    margin-top: 0px;
    padding: 0 2vw;
    background: rgba(232, 227, 227, 1.05);
  }
  
  nav ul {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline;
  }
  
  nav&gt;ul:last-of-type {
    float: right;
  }
  
  nav&gt;ul&gt;li {
    display: inline;
    position: relative;
    margin: 0;
    padding: 0;
  }
  
  nav ul&gt;li&gt;a,
  nav ul&gt;li&gt;a:focus {
    color: #000;
    font-weight: 600;
    font-size: 13px;
    display: table-cell;
    height: 100%;
    padding: 15px 20px;
    text-decoration: none;
    transition: all linear 0.1s;
    -webkit-transition: all linear 0.1s;
    -moz-transition: all linear 0.1s;
  }
  
  nav ul&gt;li&gt;a&gt;span {
    margin-left: 10px;
    transition: all linear 0.1s;
    -webkit-transition: all linear 0.1s;
    -moz-transition: all linear 0.1s;
  }
  
  nav ul ul.submenu {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    list-style: none;
    top: 100%;
    background: rgba(232, 227, 227, 1.05);
    z-index: 99;
  }
  
  nav ul ul.submenu li,
  nav ul ul.submenu li a {
    width: 200px;
  }
  
  nav&gt;ul&gt;li:hover ul.submenu {
    display: inline-block;
  }
  
  nav ul&gt;li:hover&gt;a {
    color: #fff !important;
    background: #ce0000;
    text-decoration: none;
  }
  
  nav ul.submenu&gt;li:hover&gt;a,
  nav ul.submenu&gt;li&gt;a.active {
    background: rgba(206, 0, 0, 0.8);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav id="navbar" class="navigation"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="/home"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/personaldetails"&gt;Personal Details&lt;/a&gt;
        &lt;ul class="submenu"&gt;
          &lt;li&gt;&lt;a href="/yourmoney"&gt;My Money&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/mydetails"&gt;My Details&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/admindetails"&gt;Admin Details&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/contracts"&gt;Contracts&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="/company"&gt;Company&lt;/a&gt;
        &lt;ul class="submenu"&gt;
          &lt;li&gt;&lt;a href="/taxsettings"&gt;Tax Settings&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="/invoice"&gt;Invoices&lt;/a&gt;
        &lt;ul class="submenu"&gt;
          &lt;li&gt;&lt;a href="/invList"&gt;View All Invoices&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="/contact"&gt;Create Contact&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/expenses"&gt;Expenses&lt;/a&gt;
        &lt;ul class="submenu"&gt;
          &lt;li&gt;&lt;a href="/expenselist"&gt;View All Expenses&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="/payslips"&gt;Payslips&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/eb5xkLcj/3/" rel="nofollow noreferrer">JSFiddle</a></p>