Horizontal sub menu flexible width

Question

I have a horizontal navigation that I want to have a horizonyal sub nav come off of. The issue is where I am having the sub nav display inline while it has an absolute position. I know there are issues with using an inline display when you have an absolute position. It works how I want it to with a fixed display, but I do not want it to be fixed... Does anyone know an alternative to this? Also I can't just have a set width on the sub nav because each of the sub menu's are going to be different width's.

<style>
     ul li {
        float: left;
        position: relative;
    }

    #primary-nav ul li ul {
        position: relative;
        top: 42px;
        display: none;
        width:100%;

    }
    #primary-nav ul li ul li {
        list-style:none outside none;
        margin-left:20px;
        float:left;
        z-index: 1000;
    }
    #primary-nav ul li:hover ul {
        display:inline;
        position:absolute;
    }
</style>


<ul class="menu">
    <li>menu Item</li>
    <li>drop down</li>
        <ul class="submenu">
            <li>dropdown Item</li>
            <li>dropdown Item</li>
        </ul>
 </ul>

Answer 1

Here's a tinkerbin with the solution -> http://tinkerbin.com/NlqcJcL7

By applying white-space: nowrap to the absolutely positioned .submenu, you ensure it's children inline blocks don't collapse to the next line.