显示隐藏的子 div 时不允许父 div 展开答案

【问题标题】：Do not allow the parent div to expand when hidden child div is shown显示隐藏的子 div 时不允许父 div 展开
【发布时间】：2013-07-15 20:35:00
【问题描述】：

我正在制作一个小菜单，并试图弄清楚如何不在子级取消隐藏时让父级 div 展开。

在下面的示例中，请注意，当您将鼠标悬停在 MENUS 上时，会显示 catItemWrapper div。数字 1 和 3 很好，但是当您将鼠标悬停在 MENU TWO 上时，它会展开顶部 div，因为其中一个菜单项中有更多文本。

我试图弄清楚如何不让 catWrapper div 与 catItemWrapper div 一起扩展。

http://jsfiddle.net/vyyNW/

我没有做什么？

【问题讨论】：

标签： jquery css

【解决方案1】：

jsFiddle Demo

允许绝对定位拉伸父元素的元素会将其从页面流中移除，从而阻止它调整父元素的大小。

将 catitemwrapper 设置为 position:absolute;。这样做会使 catitem 上的 margin-left 显示出来，所以你应该删除它。

.catItemWrapper { position: absolute; }

【讨论】：

【解决方案2】：

通过添加 position:relative 更改您的 .catWrapper 规则并为 catItemWrapper 添加新规则

.catWrapper {
    float: left;
    margin: 5px 10px 5px 10px;
    position:relative;
}
.catItemWrapper{
    position:absolute;
}

jsFiddle example

【讨论】：

如果您不给孩子top、left等，是否还需要position: relative？
@JamesMontagne - 不，只是习惯。如果需要改变位置，不会造成任何伤害并防止意外。
感谢您的建议！

【解决方案3】：

您想为您的子项目包装器 (.catItemWrapper') 提供绝对定位。您可以在http://jsfiddle.net/vyyNW/2/ 看到它。这也可以通过纯 CSS 轻松完成。尝试使用类似下面的代码来获得更简单、更清晰的代码。

HTML：

<ul>
    <li>
        1
        <ul>
            <li>1.1</li>
            <li>1.2</li>
        </ul>
    </li>
    <li>
        2
        <ul>
            <li>2.1</li>
            <li>2.2</li>
        </ul>
    </li>
    <li>
        3
        <ul>
            <li>3.1</li>
            <li>3.2</li>
        </ul>
    </li>
</ul>

还有 CSS：

ul, li { list-style: none; margin: 0; padding: 0; }
ul li { display: inline-block; position: relative; width: 100px; }
ul ul { display: none; position: absolute; left: 0; }
ul li:hover ul { display: block; }

检查一下。 http://jsfiddle.net/Y7dZj/

【讨论】：

谢谢，但你有点偏离了我的目标。