CSS - Dropdown Sub-Menu not correctly aligning below parent button even with absolute positioning

Question

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

@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);
}

<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

Answer 1

You have the li formatted as inline, and that’s what messes this up.

Using your browser dev tools, you can clearly see that the links inside are higher than your li.

Make your li inline-block instead.