prevent wrapping of block format UL pop-out menu items - html

Question

I'm working on a menu system that has a horizontal menu bar with pop-out menus when hovering over each of the options. What I would like to see happen is that when you hover over a menu option, there is no wrapping of top-level sub options. If I define a static width for this content it works, nothing wraps, but this looks poorly designed for the menus with less content as there's unnecessary white space. If I add a white-space nowrap the content no longer wraps but the "container" UL doesn't automatically size to the correct size of the content that is contained within it when inline-block formatted (this is the iteration that is linked below). I would like to go with a nowrap solution where the parent UL for each LI menu is sized automatically so that i don't enforce an over sized boundary that has excess white space.
The menu is below:
<div class="container">
<ul id="nav">
<li>Home</li>
<li>generic
<span id="s1"></span>
<ul class="subs">
<li>generic</li>
<li>generic 1
<ul>
<li>generic 1</li>
<li>generic 2</li>
<li>generic 3</li>
<li>generic 4</li>
<li>generic 5</li>
</ul>
</li>
<li>Week 2
<ul>
<li>Day 1</li>
<li>Day 2</li>
<li>Day 3</li>
<li>Day 4</li>
<li>Day 5</li>
</ul>
</li>
<li>Week 3</li>
<li>Week 4</li>
<li>Continual Education</li>
</ul>
</li>
<li>generic
<span id="s2"></span>
<ul class="subs">
<li>generic
<ul>
<li>generic</li>
<li>generic</li>
<li>generic</li>
</ul>
</li>
<li>Tech
<ul>
<li>generic</li>
<li>generic</li>
<li>generic</li>
<li>generic</li>
<li>generic</li>
<li>generic</li>
</ul>
</li>
<li>generic
</li>
<li>generic
</li>
</ul>
</li>
<li>generic
<span id="s3"></span>
<ul class="subs">
<li>generic</li>
<li>generic</li>
<li>generic</li>
<li>generic</li>
<li>generic</li>
</ul>
</li>
<li>generic
<span id="s4"></span>
<ul class="subs">
<li>generic
<ul>
<li>generic</li>
<li>generic</li>
<li>generic</li>
</ul>
</li>
<li>generic</li>
<li>generic</li>
</ul>
</li>
<li>generic</li>
<li>generic/generic/generic</li>
<li>generic
<span id="s5"></span>
<ul class="subs">
<li>generic</li>
</ul>
</li>
</ul>
</div>
I'm linking the whole project via JSFidle because it's just too much to put here and there's linked content. Make note in the running version in JSFiddle that when you hover over a menu the black border (which is the box, in the final version it will just be a basic drop shadow) in most of the sub menus is smaller than the content - this is what I'm trying to solve.
JSFiddle Project
If you can help I greatly appreciate it!
Didn't find an answer here that matches quite my scenario, but have tried to consider answers for similar questions - to no avail.

Answer 1

In your #nav ul.subs > li class, you are setting side padding relatively with %.
Changing this to absolute value in px has fixed the problem - saved to your fiddle.