absolute positioning ul inside another ul - html

Question

Starting from this situation:
<div id="wrapper">
<ul class="menu">
<li>item 1</li>
<ul>
<li>item 1.1</li>
<li>item 1.2</li>
</ul>
<li>item 2</li>
</ul>
</div>
#wrapper {
/*width: 218px;*/
margin: 0px auto;
background-color: #cccccc;
overflow:hidden;
position: absolute;
top: 100px;
left: 0;
z-index: 999;
width: 31px;
}
The second level menu is visible only on click on the first level item (say item 1). The first level list will make room to show the sublevel one.
First level list have a width of 31px; when I hover an item it gets 187 extra width on the right showing labels (item 1 for example) with css3 transition. The other items will keep the 31px width.
My goal is to style the second level list so that:
width is 187px;
it is positioned with top=0 and right=0 relative to the first level item (in other words it is aligned on the right with the first level item)
has a z-index higher than wrapper so that it will not move the other items when displayed.
I tried to give position relative to the first level item and absolute to the sublevel but with no luck.
The first level menu when hovered:
The second level menu displayed actually:

Answer 1

A simple demo of what you are looking for is here
<div id="wrapper">
<ul class="menu">
<li>item 1
<ul class="l2">
<li>item 1.1</li>
<li>item 1.2</li>
</ul>
</li>
<li>item 2</li>
</ul>
</div>
and the css:
ul.l2 {
background-color: grey;
display: none;
position: absolute;
z-index: 99;
}
.menu li:hover ul.l2{display:block;}
If this is the kind of behavior you want, we can take it further.