建立< li>元素拉伸比包含< ul> [英] Make an <li> element stretch wider than the containing <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

推荐答案

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。导航

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

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

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.

这篇关于建立< li>元素拉伸比包含< ul>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！