html - 绝对位置留在 parent 的 parent 而不是 parent

Question

我在尝试定位绝对定位的 div 时遇到了一些问题。我猜它的工作方式应该是这样，但是我希望它与父对象的父对象而不是父对象一起使用，因为我有一个下拉列表，当我希望它像第一个一样保持在顶部时，它会跟随父对象在旁边 li 显示为 div。我创建了一个 jsfiddle 来显示问题。 http://jsfiddle.net/trptR/ 这可以仅使用 css 来完成还是必须使用 Javascript？

HTML

<div id="navmenu">
    <ul>
        <li>example
            <ul>
                <li><a href="#">sub example1</a></li>
                <li><a href="#">sub example2</a></li>
                <li><a href="#">sub example3</a></li>
                <li><a href="#">sub example4</a></li>
            </ul>
        </li>
        <li>Test
            <ul>
                <li>Sub Test 1
                    <div>
                        <ul>
                            <li><a href="">Projekt</a></li>
                        </ul>   
                    </div>
                </li>
                <li>Sub Test 2
                <div>
                        <ul>
                            <li><a href="">Projekt</a></li>
                        </ul>   
                    </div>
                </li>
            </ul>
        </li>
    </ul>
</div>

CSS

#navmenu{
display:inline-block;
background:red;     
}
#navmenu ul{
list-style:none;
margin:0;
padding:0;  
}
#navmenu ul li{
float:left; 
position:relative;
display:block;
padding:0.5em;
}
#navmenu ul li ul{
position:absolute;  
display:none;
border:solid 1px #333;
background:#fff;
}
#navmenu ul li:hover ul{
display:inline-block;   
}
#navmenu ul li ul li{
float:none;
display:block;
position:relative;
}
#navmenu ul li ul li:hover{
background-color:#EBEBEB;
}
#navmenu ul li ul li div{
display:none;   
width:10em;
height:14.6em;
background:blue;
position:absolute;
top:0;
left:6em;
border:solid 1px #000;

}
#navmenu ul li ul li:hover div{
display:block;  
}

Answer 1

你能从你的#navmenu ul li 样式集和你的#navmenu ul li ul li 样式集中删除position:relative吗？ http://jsbin.com/ziqov/1/edit