Не разрешайте родительскому div разворачиваться, когда отображается скрытый дочерний div.

Question

Я делаю небольшое меню, и я пытаюсь выяснить, как NOT иметь родительский div, расширяющийся, когда ребенок будет скрыт.

В приведенном ниже примере обратите внимание, что при наведении указателя мыши на экран отображается catItemWrapper. Номера 1 & 3 в порядке, но когда вы наводите курсор на MENU TWO, он расширяет верхний div, так как внутри одного из пунктов меню больше текста.

Я пытаюсь выяснить, как не иметь catWrapper div развернуть с помощью catItemWrapper div.

http://jsfiddle.net/vyyNW/

Что я не делаю?

Answer 1

jsFiddle Demo

Разрешение на элемент, который простирается родитель должен быть расположен абсолютно будет удалить его из потока страницы и в результате предотвратить его изменение размера родителя.

Устанавливает катэтмвафер position:absolute;. Это делает маржу слева на показе catitem, поэтому вы должны удалить ее.

.catItemWrapper { position: absolute; } 

Answer 2

Измените правила .catWrapper путем добавления position:relative и добавить новое правило для 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/