Make an <li> element stretch wider than the containing <ul>

At the moment, I'm developing a layout for work, and I'm just a tiny bit stuck with a dynamic drop down menu. I'm using a child 'ul' within an 'li' element that will display the children of the navigation links - but the 'li' above (so the main one, that you hover on to view the children), stretches to the length of the 'ul', which is, of course, defined by the width of the 'li' elements inside that.

Also, I'm using jQuery to display the child items when the user hovers over the parent navigation item.

However, I need this not to happen! Here's a screenshot link开发者_Python百科: http://d.pr/v5Wk (I'm sorry - I'm not registered, so I can't post images! D: )

Basically, I need to get rid of the gap on the right of 'Section One', dynamically, without defining any preset widths.

Here's the HTML:

<div class="menu">
    <ul class="navigation">
        <li>
            <a href="#" onclick="return false;">Section One</a>
            <ul class="children">
                <li>
                    <a href="#" onclick="return false;">Child Item One</a>              
                </li>
                <li>
                    <a href="#" onclick="return false;">Test</a>
                </li>
                <li>
                    <a href="#" onclick="return false;">Test</a>
                </li>
                <li>
                    <a href="#" onclick="return false;">Test</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#" onclick="return false;">Section Two</a>
        </li>
        <li>
            <a href="#" onclick="return false;">Section Three</a>
        </li>
        <li>
            <a href="#" onclick="return false;">Section Four</a>
        </li>
        <li>
            <a href="#" onclick="return false;">Section Five</a>
        </li>
        <li>
            <a href="#" onclick="return false;">Section Six</a>
        </li>
    </ul>
</div>

And here's the CSS:

.menu { width: 100%; overflow: hidden; display: block; position: absolute; margin: 75px auto; background: #666 url('../image/stripe.png'); }

ul.navigation { list-style-type: none; width: 900px; margin: 0 auto; }

ul.navigation li a { color: #fff; text-decoration: none; display: block; padding: 10px; }

ul.navigation li a:hover { color: #fff; background: #444 url('../image/stripe_active.png');}

ul.navigation li { float: left; }


ul.navigation li ul.children { list-style-type: none; display: block; overflow: hidden; position: relative; z-index: 1; }

ul.navigation li ul.children li { color: #fff; float: left; font-size: 11px; white-space: nowrap; }

Any help on this would be great!

Many thanks, Matt

ul.navigation li ul.children {
list-style-type: none;
display: block;
overflow: hidden;
position: absolute;
z-index: 1;
top: 2em;
left: auto;
right: auto;
}

If you still can't see them, add height: 5em to ul.navigation

Position:Absolute causes an element to be rendered at a specific spot on the page, taking it out of the normal flow. Since it is no longer being rendered inside the topnav li, it doesn't cause it's width to be too large.

Have you tried to position:absolute the children?

Does it need to be an ul/li solution? wouldn't it be easier to update the contents of the submenu with javascript when you hover over the top nav?