Question

我想让一些菜单看起来不错，但我似乎有两种选择可以做到我想要的一半。我能做些什么会给我带来我想要的两种行为？

问题在于菜单中的偏移量。当我将子菜单设置为相对时。一切都在扩展，因为它不应该。当子菜单被鼠标覆盖时，它就会扩展到位，而不是像我希望的那样向右移动。下面的jsfiddle显示了这种行为：

当我使用绝对时，所有子菜单都粘在左边。它们完全按照我的意愿进行扩展，但每个菜单都在屏幕左侧，而不是直接位于主菜单项下方。下面的jsfiddle显示了这个：

正在更改的代码是：

#navbar ul li ul {
     display:none;
     position:absolute;
     left: 30px;
     background-color:transparent;
     padding:10px;
     opacity:0.95;
}

致：

#navbar ul li ul {
         display:none;
         position:relative;
         left: 30px;
         background-color:transparent;
         padding:10px;
         opacity:0.95;
    }

如何保持菜单不像第二个jsfiddle那样扩展，但是不要让菜单卡在页面的左侧？

Answer 1

如果您将包含li元素设置为position: relative，则您的绝对定位ul元素将相对于其父元素定位：

#navbar ul li {
    /* ... */

    position: relative;
}

http://jsfiddle.net/w8ztr9eb/3/

Answer 2

这是一个开始。当您使用absolute时，它会根据最近的父级定位。所以，试试：

#navbar ul li {
    position: relative;
}

#navbar ul li ul {
    position:absolute;
    left: 0px;
    padding:1px;
}

http://jsfiddle.net/w8ztr9eb/2/

绝对和相对之间的中间

2 个答案: