使

元素拉伸得比包含的

更宽

目前，我正在开发一个工作布局，但我对动态下拉菜单有点困惑。我在“li”元素中使用子“ul”，该元素将显示导航链接的子项 - 但上面的“li”（因此是主要的，您将鼠标悬停在其上以查看子项），延伸到'ul' 的长度，当然是由其中的 'li' 元素的宽度定义的。

另外，当用户将鼠标悬停在父导航项上时，我使用 jQuery 显示子项。

但是，我希望不要发生这种情况！这是一个屏幕截图链接：http://d.pr/v5Wk http://d.pr/v5Wk（抱歉 - 我没有注册，所以我无法发布图片！D：）

基本上，我需要动态地消除“第一部分”右侧的间隙，而不定义任何预设宽度。

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

任何对此的帮助都会很棒！

非常感谢， 马特

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

如果您仍然看不到它们，请将 height: 5em 添加到 ul.navigation

Position:Absolute 导致元素在页面上的特定位置呈现，使其脱离正常流程。由于它不再在 topnav li 内渲染，因此不会导致其宽度太大。