CSS: 让嵌套的绝对定位DIV左对齐

Question

我有一个下拉菜单，想让其内容左侧与屏幕对齐。无论我尝试什么方法，它仍然保持在其父容器内对齐。

由于下拉菜单在浏览器中居中，所以我很难让它按照我的意愿工作。

链接：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的链接——不确定为什么，所以请忽略倒出的代码，因为你可以在fiddle中看到它。

- Alex Guerin

---

StackOverflow一直强调需要代码而不仅仅是jsFiddle的链接 - 不确定为什么。他们并不拥有jsfiddle，如果它有一天关闭了怎么办？这将导致成千上万的问题没有上下文。你应该把所有的代码都放在这里。 - Popnoodles

Answer 1

当你将其边距设为0像素时，它会相对于其父元素变为0像素。因此，您可以尝试在其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/

- sadaf2605

Answer 2

.content盒子相对于其父元素.n.drop div进行定位，因为它有相对定位。如果您从.n.drop元素中删除相对定位，您会发现.content元素会自动定位到您想要的位置。您可能还需要向.content元素添加margin-top: 16px;以使其清晰显示菜单。

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

- Godwin

---

从Chrome（在Windows上），我只能看到“orld！”而从火狐浏览器上，我只能看到“d！” - sadaf2605

@sadaf2605，我这里没有看到这个问题，而且我没有看到它时不确定会出现什么原因。 - Godwin

@sadaf2605，我现在明白是什么原因导致了这个问题，窗口可能少于800像素宽，而nav元素已被设置为绝对定位。我更新了jsfiddle代码，通过添加样式margin：auto；来取消绝对定位，同时仍然居中显示。 - Godwin