3

我有一个包含内容的下拉菜单。我正在尝试使内容在屏幕左侧的 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 的链接——不知道为什么要忽略转储的代码，因为你可以在 fiddle 中看到它。

在此处输入图像描述

4

2 回答 2

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/

于 2012-12-30T02:53:23.443 回答
2

该.content框相对于其父.n.drop级 div 定位，因为它具有相对定位。如果您从.n.drop元素中删除相对定位，您会发现.content元素将自身定位在您想要的位置。您可能还需要向元素添加 amargin-top: 16px;以.content使其清除菜单。

你可以在这里看到更新的演示：http: //jsfiddle.net/XkuHy/14/

于 2012-12-30T02:26:12.913 回答