Third-level CSS dropdown - html

Question

I have a CSS dropdown which is basically this: http://jsfiddle.net/2RgmH/
<ul id="menu">
<li><span>Example 1</span>
<ul>
<li><span>Level 2-A-1</span></li>
<li><span>Level 2-A-2</span></li>
<li><span>Example 2</span>
<ul>
<li><span>Example 3</span>
<li><span>Level 3-A-2</span></li>
<li><span>Level 3-A-3</span></li>
</ul>
</li>
<li><span>Level 2-A-4</span></li>
</ul>
</li>
<li><span>Level 1-B</span></li>
<li><span>Level 1-C</span></li>
<li><span>Level 1-D</span></li>
<li><span>Level 1-E</span></li>
</ul>
#menu > li > ul li > ul{ /* Third Level & beyond */
display:none;
background:#068;
}
#menu > li > ul li:hover > ul{
display:block;
position:absolute;
left:100%;
border-left:solid 3px #fff;
top:0;
width:auto;
}
#menu > li > ul > li ul > li{
display:block;
padding:3px 10px;
border-top:solid 3px #fff;
white-space:nowrap;
}
#menu > li > ul > li ul > li:hover > span{
color:#fff;
}
I would like Level 3 to line up with Level 2. Changing the 3rd level dropdown to position:relative almost does this, but it increases the size of the Example 2 to the size of the 3rd level menu - not good.
Where am I going wrong?
Edit:
I should have linked to the actual example, apologies. The page I'm working on is here: http://gmnscouts.org.uk/index2.php/ - it's the second menu. If you go to Counties > Activities, you will see my problem. The li stretches to accomodate the ul. This is with it set to relative. Setting it to absolute pushes the menu to the top, which is also unwanted behaviour.

Answer 1

Add this CSS:
ul.children li ul.children {
position: absolute;
left: 100%;
top: 0;
}
ul.children > li { position: relative; }
Through absolute positioning the third-level menu will not take up any space because it will be in its own layer.