CSS dropdown menu subitem positioning - html

Question

I'm having an issue where my dropdown is always on the left. I need to have it so it's directly under each menu item.
I tried playing around with the positioning because the absolute of the subitems is why it's going on the left all the time. But putting position: relative on subitem breaks the menu completely on hover.
Demo of issue: https://jsfiddle.net/dsngpsxb/2/
Code below:
HTML:
<nav class="main-navigation">
<ul>
<li class="item">item
<ul class="subitem">
<li>subitem</li>
<li>subitem</li>
<li>subitem</li>
</ul>
</li>
<li class="item">item
<ul class="subitem">
<li>subitem</li>
<li>subitem</li>
<li>subitem</li>
</ul>
</li>
<li class="item">item</li>
<li class="item">item</li>
<li class="item">item</li>
<li class="item">item</li>
<li class="item">item</li>
</ul>
</nav>
SCSS/SASS:
.main-navigation {
width: 100%;
position: relative;
ul {
margin: 0 auto;
padding: 18px;
.item {
display: inline;
padding-right: 43px;
font-size: 13px;
text-transform: uppercase;
&:hover ul {
display: block;
}
}
}
}
.subitem {
display: none;
position: absolute;
top: 50px;
li {
line-height: 30px;
font-size: 14px;
}
}
Please note that I did indeed do research here and found several questions on SO that explain my problem and I tried all accepted answers but none work.
I have included each example with a corresponding JSfiddle example below:
Dropdown menu appearing not below parent
adding position: relative to my subitem completely breaks menu: https://jsfiddle.net/mtp2cg7c/2/
CSS: make dropdown submenu appear below parent <ul> <li>
block display, relative positioning and a left float on my <li> with absolute positioning, 100% top and left: 0 on my <ul> "smashes" all the items togther: https://jsfiddle.net/9s9Lmr1h/4/
CSS dropdown menu element moving to left?
In the fiddle attached I noted that the global container as a property of clear: both; - I tried that in conjunction with floats and positioning. All sub items still float to the left: https://jsfiddle.net/3x3krdsd/1/
Is my <nav> tag to blame? I can't find anything that suggests this tag alters behavior of these rules: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav

Answer 1

Add a position: relative; to your .item and left: 0; to your .subitem.
This will make the sub-item position itself relative to the parent item, which should give you the result you want: https://jsfiddle.net/58sb3rL4/