三级CSS下拉

Question

我有一个CSS下拉菜单这基本上是这样的：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; 
} 

我想3级与2级改变3级下拉菜单位置来排队：相对几乎做到这一点，但它会将示例2的大小增加到第三级菜单的大小 - 效果不佳。

我哪里错了？

编辑：

我应该链接到实际的例子，道歉。我正在处理的页面位于：http://gmnscouts.org.uk/index2.php/ - 这是第二个菜单。如果你去县政府>活动，你会看到我的问题。李延伸适应ul。这是与它设置为相对。将其设置为绝对将菜单推到顶部，这也是不必要的行为。

Answer 1

添加这个CSS：

ul.children li ul.children { 
position: absolute; 
left: 100%; 
top: 0; 
} 
ul.children > li { position: relative; } 

通过绝对定位的第三级菜单不会占用任何空间，因为它会在自己的层。