子菜单必须出现在起始点上面的div

Question

以下是FIDDLE

中的代码

这里我有一个演示div，如果我选择菜单产品，它应该总是选择子菜单，从上面的演示div的起点开始。

这是我的代码。

子菜单的CSS代码：

ul li ul {
display: none;
width: 300px;
position: absolute;
left: 0;
margin-left: 8px;
}

我的代码中是否遗漏了任何内容。

Answer 1

ul li{
   float: left;
   width: 100px;
   text-align: center;
   position:relative; <---- add this
}

position:relative设置绝对定位子元素的原点。

Answer 2

当您编写position:absolute时，它取相对于您的浏览器窗口的位置，请尝试position:relative相对于其父级的位置

ul li ul {
display: none;
width: 300px;
position: relative;
left: 0;
margin-left: 0px;
}

Answer 3

试试这个：

ul{
    position: relative;
}
ul li ul{
    margin-left: 0;
}

Demo