當隱藏的子div顯示時，不要讓父div展開

我正在創建一個小菜單，並且我想知道如何不是父子div在子隱藏時展開。當隱藏的子div顯示時，不要讓父div展開

在下面的示例中，請注意鼠標懸停MENUS時catItemWrapper div會顯示。 Numbers 1 & 3很好，但是當您將鼠標懸停在菜單TWO上時，它將展開頂部div，因爲其中一個菜單項的內容更多。

我想弄清楚如何不使catWrapper div與catItemWrapper股利擴大。

http://jsfiddle.net/vyyNW/

什麼我不這樣做？

來源

2013-07-15 Monty

jsFiddle Demo

允許一直延伸母體要絕對定位將從頁面流中取出，並作爲結果防止其調整大小的父元素。

將catitemwrapper設置爲position:absolute;。這樣做會使得節目留下餘量，所以你應該刪除它。

.catItemWrapper { position: absolute; }

來源

2013-07-15 20:40:45

這就是我要找的，謝謝！ – Monty

加入position:relative更改.catWrapper規則和添加新規則catItemWrapper

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

jsFiddle example

來源

2013-07-15 20:41:18 j08691

如果您不給孩子頂部，左側等，「位置：親戚」是否需要？ –

@JamesMontagne - 不，只是習慣。如果需要改變立場，不會造成任何傷害並防止出現意外。 – j08691

感謝您的建議！ – Monty

你想給你的分項目包裝（.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-15 20:43:22 Chad

謝謝，但你有點偏離我的目標。 – Monty

當隱藏的子div顯示時，不要讓父div展開

回答

相關問題