CSS multi level menu with nested list - html

Question

(source: torrent-invites.com)
I want to make pure CSS multi level menu like the picture above. I have tried some tutorial but its not working for me. Menu "xxxxx" and "yyyyy" appear below menu "bbbbb" for my CSS code below.
What I want to make is 3 level menu like the picture above.
This is my HTML for the menu:
<span id="nav">
<ul>
<li>ssss
<ul>
<li>aaaaa</li>
<li>bbbbb
<ul>
<li>xxxxx</li>
<li>yyyyy</li>
</ul>
</li>
</ul>
</li>
<li>ttttt</li>
<li>uuuuu</li>
</ul>
</span>
And this is my minimized CSS code:
li {
list-style:none !important;
}
#nav, #nav ul {
list-style: none;
padding:0;
margin:0;
}
#nav li {
line-height:20px;
float:left;
}
#nav li ul{
display:none;
}
#nav ul li ul {
margin-top:-3em;
margin-left:7em;
}
#nav ul li:hover ul {
z-index:99999;
display:list-item !important;
position:absolute;
margin-top:2px;
margin-left:0px;
padding: 5px 15px;
background: #8ac312;
}
#nav ul li:hover ul li {
float:none;
padding: 2px 0px;
}
#nav ul li:hover ul li > a:before {
content: '» ';
}
Any help would be very appreciated to make my CSS code working like the illustration picture above. Thanks.

Answer 1

I think your problem is position relative and absolute. I remove your style and do on my own (simpler, uglier). Code is here jsFiddle
And the code is:
CSS:
ul { padding:0; margin:0; }
li { list-style:none; }
li > ul { display: none; }
li:hover > ul { display: block; }
.lvl1 li { margin-right: 10px; display: inline; position:relative; }
.lvl2 { position: absolute; }
.lvl2 li { position: relative; }
.lvl3 { position: absolute; top:0px; left: 50px; }
HTML:
<span id="nav">
<ul class='lvl1'>
<li>ssss
<ul class='lvl2'>
<li>aaaaa</li>
<li>bbbbb
<ul class='lvl3'>
<li>xxxxx</li>
<li>yyyyy</li>
</ul>
</li>
</ul>
</li>
<li>ttttt</li>
<li>uuuuu</li>
</ul>
</span>

Answer 2

I've edited your code a bit ... check this fiddle http://jsfiddle.net/kau5h/
li {
list-style:none !important;
position:relative;
}
#nav, #nav ul {
list-style: none;
padding:0;
margin:0;
}
#nav li {
line-height:20px;
float:left;
}
#nav li a {display:block;}
#nav li ul{
display:none;
z-index:99999;
/*display:list-item !important;*/
position:absolute;
/*margin-top:2px;*/
margin-left:0px;
background: #8ac312;
}
#nav li ul ul {left: 100%; top:0;}
#nav ul li ul {
/*margin-top:-3em;
margin-left:7em;*/
}
#nav ul li:hover > ul {
display: block;
}
#nav ul li:hover ul li {
float:none;
/*padding: 2px 0px;*/
}
#nav ul ul li {
padding: 5px 15px;
display: block;
}
#nav ul ul li > a:before {
/*content: '» '; */
}