Зеленая улица не расширяется, чтобы плавать, оставив две синие лики. Абсолютное значение для зеленого вызывает мое горе на высоте, не покрывающей его вложенные элементы. Как я могу пройти мимо этого, чтобы зеленый фон расширялся, чтобы покрыть его детей? Я хотел бы сохранить это как прямой css, но если jquery будет делать трюк, который им интересен. http://jsfiddle.net/B34AU/
ul, li {
list-style: none;
margin: 0;
padding: 0;
}
ul {
background: red;
}
li {
display: inline-block;
position: relative;
width: 100px;
background: yellow;
margin: 10px;
}
li ul {
display: none;
position: absolute;
background: green;
overflow: visible;
white-space: nowrap;
}
li:hover > ul {
display: block;
}
li > ul > li {
background: blue;
width: 200px;
display: inline-block;
}
li > ul > li > ul {
background: #cc0000;
display:block;
}
li > ul > li > ul > li {
background: #cc0000;
display:block;
width: 200px;
margin: 0;
padding: 0;
}
<ul>
<li>
1
<ul>
<li><a href="">1.1</a>
<ul>
<li><a href="">1.1.1</a></li>
<li><a href="">1.1.2</a></li>
<li><a href="">1.1.3</a></li>
</ul>
</li>
<li><a href="">1.2</a></li>
<li><a href="">1.3</a></li>
</ul>
</li>
<li>
2
<ul>
<li>2.1</li>
</ul>
</li>
<li>
3
<ul>
<li>3.1</li>
<li>3.2</li>
</ul>
</li>
</ul>
Я изменил эти строки CSS и его работу отлично, как ожидалось.
Изменены эти CSS
li > ul > li {
background: blue;
width: 200px;
display: inline-block;
vertical-align: top; /*Added this line*/
}
li > ul > li > ul {
background: #cc0000;
display:block;
position: static;/*Added this line*/
}
Если вы хотите развернуть <ul>
независимо от количества детей, вы можете использовать
li > ul {
white-space: nowrap;
}
li > ul > li {
display: inline-block;
}
li > ul { overflow: visible; }
вместо auto
. демонстрация
Вам нужно установить width
:
width: 440px;
Просто используйте следующую формулу
numChilds * (marginLeft + borderLeft + paddingLeft + width + paddingRight + borderRigth + marginRigth)
= 2 * (10+0+0+200+0+0+10)
= 2 * 220
= 440
>
) вместо потомков, которые медленнее.