Question

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

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

但是，我不需要这样做！这是一个截图链接：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; }

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

非常感谢，马特

Answer 1

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

如果仍然看不到它们，请将高度：5em添加到ul.navigation

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

Answer 2

您是否尝试过定位：绝对是孩子们？

Answer 3

是否需要成为ul / li解决方案？当您将鼠标悬停在顶部导航栏上时，用javascript更新子菜单的内容会不会更容易？

使<li>元素拉伸比包含<ul> </ul> </li>更宽

3 个答案: