绝对定位元素不基于其父级显示

Question

我一直在尝试使用nested unordered lists创建一个下拉菜单。实际上我有一个父无序列表，其中有一些<li>包含第一级菜单。我试图在那些unordered lists内的那些第一级菜单中插入<li>。好吧，我将内部无序列表定位为absolute，并将left指定为0。

问题出现了，内部无序列表的父元素应该是<li>元素。但它假设其父级为主要的无序列表，即<li>元素的父级。结果，内部无序列表显示在0的左侧，相对于主无序列表。我需要相对于<li>元素显示它。我做错了什么。为什么那个内部无序列表没有将其父元素视为<li>元素。？

DEMO - Fiddle

Answer 1

将父li的样式设置为：

#ULHeaderMenuWrapperMenuCollection > li {
    /*Other styles*/
    position: relative;
}

Answer 2

使用此css

#ULHeaderMenuWrapperMenuCollection > li {
display: inline;
padding-left: 15px;
cursor: pointer;
position: relative;
}

在父li中设置position: relative;

Demo