html - 绝对定位元素不根据其父元素显示

Question

我一直在尝试使用nested unordered lists. 实际上我有一个父无序列表，其中有一些<li>包含第一级菜单。我试图unordered lists在那些第一级菜单中插入，即] 在那些<li>. 好吧，我将内部无序列表定位为absolute并且我分配了left为 0。

问题来了，内部无序列表的父元素应该是<li>元素。但它假定它的父级是主要的无序列表，即]<li>元素的父级。结果，内部无序列表相对于主无序列表显示在 0 的左侧。我的需要是相对于<li>元素显示它。我做错了什么。？为什么该内部无序列表不假定其父级为<li>元素。？

演示 - 小提琴

Answer 1

将 parentli的样式设置为：

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

Answer 2

使用这个 CSS

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

设置position: relative;在父 li

演示