Question

我正在制作一个小菜单，我正在试图弄清楚当孩子被隐藏时，不如何扩展父div。

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

我正在试图弄清楚如何不使用catWrapper div展开catItemWrapper div。

我不做什么？

Answer 1

的 jsFiddle Demo 的

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

将catitemwrapper设置为position:absolute;。这样做会使catitem显示左边距，所以你应该删除它。

.catItemWrapper { position: absolute; }

Answer 2

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

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

<强> jsFiddle example

Answer 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/

当显示隐藏的子div时，不允许父div扩展

3 个答案: