parent ul не распространяется на контент

Question

Зеленая ul не расширяется, чтобы плавать, оставив две синие лики. Абсолютное значение для зеленого вызывает мое горе на высоте, не покрывающей его вложенные элементы. Как я могу пройти мимо этого, чтобы зеленый фон расширялся, чтобы покрыть его детей? Я хотел бы сохранить это как прямой 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> 

Answer 1

Я изменил эти CSS линии и его работает отлично, как и ожидалось.

Working Demo

изменили эти 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*/ 
} 

Answer 2

Demo

Вы должны установить width:

width: 440px; 

Просто используйте следующую формулу

numChilds * (marginLeft + borderLeft + paddingLeft + width + paddingRight + borderRigth + marginRigth) 
= 2 * (10+0+0+200+0+0+10) 
= 2 * 220 
= 440 

Answer 3

Если вы хотите расширить <ul> независимо от числа детей, вы можете использовать

li > ul { 
    white-space: nowrap; 
} 
li > ul > li { 
    display: inline-block; 
} 

Demo