CSS：使绝对嵌套的DIV左对齐

Question

我有一个内容下拉列表。我正在尝试使内容在屏幕左侧的0px处对齐。无论我尝试什么，它仍然在其父容器中保持对齐。

由于下拉菜单集中在浏览器中，因此我无法将其工作放在我想要的位置。

http://jsfiddle.net/XkuHy/2/

<div id="sticky">
    <div id="nav">
        <div class="logo">logo</div>
        <span class="n list">browse</span>
        <span class="n list">search</span>
        <div class="n drop">
            <span>My Account</span>
            <div>
                hello, world!
            </div>
        </div>
    </div>

注意：CSS 不是我的强项。

注意2：StackOverflow一直在敲打所需的代码，而不仅仅是指向jsFiddle的链接 - 不知道为什么这样忽略转储的代码，因为你可以在小提琴中看到它。

Answer 1

.content框相对于其父.n.drop div定位，因为它具有相对定位。如果从.n.drop元素中删除相对定位，您将找到.content元素，以便将自己定位在您想要的位置。您可能还需要在margin-top: 16px;元素中添加.content以清除菜单。

您可以在此处查看更新的演示：http://jsfiddle.net/XkuHy/14/

Answer 2

当你的保证金为0px时。它将达到0px，但就其父级而言。因此，您可以尝试将负值的余量设为其css：

margin-left:-205%;

像这样：http://jsfiddle.net/XkuHy/13/ 或

left: -345px;

像这样：http://jsfiddle.net/XkuHy/13/

但他们都有跨浏览器可比性问题。

我已经通过将此问题添加到css解决了这个问题，其中“hello world”的类名为“dropmenu”：

.drop:hover .dropmenu{
    position: fixed;
    top:  100px;
    left: 0;
    width: 100%;
    height:100px;
    padding:0;
    margin:0;
    z-index:998;
    background-color:white; 
}
​

惊喜！惊喜！我觉得它有效！查看： http://jsfiddle.net/XkuHy/10/