Title fairly explanatory.

My dropdown submenus are not aligning exactly to the bottom of the parent list item element.

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

```css
@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>ul:last-of-type {
  float: right;
}

nav>ul>li {
  display: inline;
  position: relative;
  margin: 0;
  padding: 0;
}

nav ul>li>a,
nav ul>li>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>li>a>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>ul>li:hover ul.submenu {
  display: inline-block;
}

nav ul>li:hover>a {
  color: #fff !important;
  background: #ce0000;
  text-decoration: none;
}

nav ul.submenu>li:hover>a,
nav ul.submenu>li>a.active {
  background: rgba(206, 0, 0, 0.8);
}
```

```html
<nav id="navbar" class="navigation">
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/personaldetails">Personal Details</a>
      <ul class="submenu">
        <li><a href="/yourmoney">My Money</a></li>
        <li><a href="/mydetails">My Details</a></li>
        <li><a href="/admindetails">Admin Details</a></li>
        <li><a href="/contracts">Contracts</a></li>
      </ul>
    </li>
    <li><a href="/company">Company</a>
      <ul class="submenu">
        <li><a href="/taxsettings">Tax Settings</a></li>
      </ul>
    </li>
    <li><a href="/invoice">Invoices</a>
      <ul class="submenu">
        <li><a href="/invList">View All Invoices</a></li>
      </ul>
    </li>
    <li><a href="/contact">Create Contact</a></li>
    <li><a href="/expenses">Expenses</a>
      <ul class="submenu">
        <li><a href="/expenselist">View All Expenses</a></li>
      </ul>
    </li>
    <li><a href="/payslips">Payslips</a></li>
  </ul>
</nav>
```

[JSFiddle](https://jsfiddle.net/eb5xkLcj/3/)