Title fairly explains it all.
I'm having trouble getting my dropdown submenus to align perfectly with the bottom of the parent list item element.
The list item has a relative position, while the submenu has an absolute position. I've attempted positioning the submenus 100% from the top of the parent, but they end up appearing halfway down the parent li. Similarly, using top 175% works on some screens but not others. It seems like setting it to be 100% from the top of the parent should do the trick.
@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>