Last nav link being pushed away when drop down is called - html

Question

For some reason I can't get my last nav link to stay with the rest of them. I can do this if i set .dropdown ul li .menu position to absolute, but then the drop down links are pushed to the right and not centered. Padding-right nor margin-right doesn't resolve this issue.
JSFiddle
Before
After
Position: Absolute
.title {
font-family: 'Philosopher', sans-serif;
margin-left: 20px;
color: white;
float: left;
padding-right: 70px;
padding-top: 5px;
}
#body {
background-color: black;
}
.dropdown ul {
padding-top: 10px;
}
.dropdown ul li .menu {
position: absolute;
float: none;
}
.menu-hover-lines {
margin-top: 35px;
float: right, bottom;
text-align: center;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 3px;
transition: all 0.35s ease;
}
.menu-hover-lines li a {
padding: 0.75rem 0;
color: white;
position: relative;
margin-left: 1rem;
margin-right: 4rem;
margin-top: 20px;
}
.menu-hover-lines li:first-child a {
margin-left: 10px;
}
.menu-hover-lines li.active > a {
background-color: transparent;
}
/* Nav transition settings */
.menu-hover-lines a::before,
.menu-hover-lines a::after {
height: 3px;
position: absolute;
content: '';
transition: all 0.40s ease;
background-color: #932929;
width: 0;
}
.menu-hover-lines a::before {
top: 0;
left: 0;
}
.menu-hover-lines a::after {
bottom: 0;
right: 0;
}
/* Nav text settings on hover*/
.menu-hover-lines a:hover,
.menu-hover-lines li.active > a {
color: #8e8e8e;
transition: all 0.40s ease;
}
.menu-hover-lines a:hover::before,
.menu-hover-lines .active a::before,
.menu-hover-lines a:hover::after,
.menu-hover-lines .active a::after {
width: 100%;
}
.dropdown li .menu {
display: none;
}
.dropdown li:hover .menu {
display: inline-block;
float: none;
}
<!-- Nav Bar -->
<div class="dropdown" >
<ul class="menu dropdown menu-hover-lines" data-dropdown-menu>
<li>Home</li>
<li >Collections
<ul class="menu">
<li>Autos</li>
<li>Models</li>
<li>Extreme Sports</li>
</ul>
</li>
<li>About me</li>
<li>Get in touch
<ul class="menu">
<li><i class="fas fa-envelope fa-2x" data-toggle="tooltip" title="Email me!"></i></li>
<li><i class="fab fa-twitter fa-2x" data-toggle="tooltip" title="Tweet me!"></i></li>
<li><i class="fab fa-instagram fa-2x" data-toggle="tooltip" title="Message me!"></i></li>
</ul>
</li>
</ul>
</div>

Answer 1

I think you need to add left:0 and top:100% to your dropdown-menu with position:absolute. Remember to add position:relative to your .menu>li...
I have added .dropdown-menu class in the dropdown ul...
Also I noticed that you have written float: right, bottom in your css which is not valid...
Stack Snippet
body {
font: 13px Verdana;
}
.menu {
padding: 0;
display: flex;
}
.menu>li {
margin: 0 10px;
list-style: none;
position: relative;
}
.menu li a {}
.dropdown-menu {
padding: 0;
position: absolute;
top: 100%;
left: 0;
border: 1px solid;
padding: 10px;
}
.dropdown-menu>li {
list-style: none;
}
<!-- Nav Bar -->
<div class="dropdown">
<ul class="menu dropdown menu-hover-lines" data-dropdown-menu>
<li>Home</li>
<li>Collections
<ul class="dropdown-menu">
<li>Autos</li>
<li>Models</li>
<li>Extreme Sports</li>
</ul>
</li>
<li>About me</li>
<li>Get in touch
<ul class="menu">
<li><i class="fas fa-envelope fa-2x" data-toggle="tooltip" title="Email me!"></i></li>
<li><i class="fab fa-twitter fa-2x" data-toggle="tooltip" title="Tweet me!"></i></li>
<li><i class="fab fa-instagram fa-2x" data-toggle="tooltip" title="Message me!"></i></li>
</ul>
</li>
</ul>
</div>