1

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

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

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

http://jsfiddle.net/vyyNW/

我不做什么？

4

3 回答 3

2

jsFiddle Demo

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

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

.catItemWrapper { position: absolute; }
于 2013-07-15T20:40:45.280 回答
1

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

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

jsFiddle 示例

于 2013-07-15T20:41:18.403 回答
0

你想给你的子项目包装器 ( .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/

于 2013-07-15T20:43:22.400 回答