Box Model position and flow on menu (position absolute) - html

Question

I'm trying to make a menu and i'm stuck.
I want to know if someone have some idea without make too much black magic (js and stuff).
Here is my CSS:
* {
margin: 0;
padding: 0;
list-style: none;
}
.wrap {
background: red;
}
.ul-one {
background: green;
position: static;
display: inline-block;
}
.ul-two {
background: gray;
position: absolute;
left: 50px;
top: 0;
}
and HTML:
<div class="wrap">
<ul class="ul-one">
<li>um</li>
<li>dois</li>
<li>tres</li>
<li>quatro</li>
<li>
<ul class="ul-two">
<li>__um</li>
<li>__dois</li>
<li>__tres</li>
<li>__quatro</li>
<li>__cinco</li>
<li>__seis</li>
<li>__sete</li>
<li>__oito</li>
<li>__nove</li>
<li>__dez</li>
<li>__once</li>
</ul>
</li>
</ul>
</div>
Here's the jfiddle:
http://jsfiddle.net/4m5g09Lb/
I want the parent (red div) grow with the children ul.
I'm reading on the web a lot and found some solution, but none of them work when use with position absolute.
This structure will be inside more divs, but i think if work for some levels, it will work with a lot of levels.
Thanks in advance.

Answer 1

you can use
ul:nth-child(even){
}
for all even children
ul:nth-child(odd){
}
for all odd children.