建立< li>元素拉伸比包含< ul>

目前，我正在开发一个工作布局，我只是一个很小的卡住了一个动态下拉菜单。我在'li'元素中使用一个孩子'ul'，将显示导航链接的孩子 - 但上面的'li'（所以主要的，你悬停在上查看孩子），延伸到'ul'的长度，这当然是由'li'元素的宽度定义的。

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.

此外，我使用jQuery来显示

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

但是，我需要这个不要发生！以下是屏幕截图链接： http://d.pr/v5Wk （很抱歉，我没有注册，所以我不能张贴图片！D：）

However, I need this not to happen! Here's a screenshot link: 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.

以下是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>

这里是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; }

任何帮助都很棒！

非常感谢，
Matt

Many thanks, Matt