Dropdown navigation with same width as parent navigation - html

Question

I already tried "width: 100%;" but the dropdown element then gets the same width as the whole page. I'm working with floats so maybe that needs a different approach?
I swear I've looked at similar questions but none of the solutions there worked for me. Can anyone see what I'm doing wrong? You can find the jsfiddle with all of the code here. I currently "solved" the problem with a fixed width.
Here is the HTML for the navi:
<nav role="navigation" class="navi">
<ul class="nav-elements">
<li>Home</li>
<li>Ongoing Stories
<ul>
<li>Sublink</li>
<li>Another Sublink with a long text</li>
</ul>
</li>
<li>Sleeping Stories
<ul>
<li>Sublink</li>
<li>Another Sublink</li>
</ul>
</li>
<li>News</li>
<li>About/FAQ</li>
</ul>
</nav>
And the CSS:
.navi {
float: left;
margin-bottom: 0.5em;
}
.navi ul {
padding-left: 0; /* Navi aligned left */
margin: 0;
}
.navi li {
background: #808080;
float: left;
padding: 0.2em 0.8em 0.2em 0.8em;
border: 1px solid black;
margin: 0 0.4em 0.4em 0;
list-style: none;
font-size: 1.2em;
border-radius: 10px;
}
/* nav-elements for dropdown-menus */
.nav-elements ul {
margin-top: 0.2em;
padding: 7px 10px 0 0;
}
.nav-elements li ul {
position: absolute;
left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
z-index: 1000;
width: 9.25em;
margin-left: -0.85em; /* to counter the padding in .navi li */
}
.nav-elements li:focus,
.nav-elements li:hover { /* main navi gets shadow while dropdown is active */
text-shadow: 0 0 7px rgba(255,255,255,.5); /* kind of a glow effect */
}
.nav-elements li:focus ul, /* show the submenu when user focues (e.g. via tab) the parent li [doesn't work?]*/
.nav-elements li:hover ul { /* show the submenu when user hovers over the parent li */
left:auto; /* Bring back on-screen when needed */
text-shadow: none; /* dropdown doesn't inherit shadow from main-navi*/
}
.nav-elements ul li {
float: none;
font-size: .9em;
}

Answer 1

According to your issue that you don't want to use fixed width then please check my Updted fiddle
I have used width:100% so it will change according to parent ul. What you need is to change width:100% and position:relative or parent li(.navi li) and then i removed margin-right as it was extra and you got the result.
Updated
As i have used position:relative so width:100 is taking width inside the border so you are missing 2px gap so just for workaround i have used width:101%. Please check my updated fiddle.
let me know if its what you need. Thank you :)

Answer 2

your second ul element can just be wide as the li element around it. try this:
#subMenuFoo {
display: none;
}
#foo:hover ~ #subMenuFoo {
display: block;
}
<div class="nav-elements">
foo
<div id="subMenuFoo">
bar
</div>
</div>
--
please mind the gap