如何在子页面上对齐子菜单

Question

我有一个菜单（黄色），带有子菜单（第一列）和另一个子菜单。

我需要知道如何让子菜单始终保持在最顶层。

// menu in the middle
.leftMenu ul li .pchild {
    width: 193px;
    list-style: disc!important;
}
// child menu ( on the right )
    .leftMenu ul li .pchild li .childpost {
    padding-left: 20px;
    display: none;
    position: absolute;
    top: 0px;
    left: 175px;
    width: 413px;
}

为了方便起见：这是网站：http://www.ruigrok-nederland.nl/

Answer 1

它当前显示的是因为它与li元素相关。您将需要相对于div.child元素或类似的元素。

为您的代码添加position:static到您的.leftMenu ul li .pchild li。像这样：

.leftMenu ul li .pchild li {
    position:static
}

即，在style.css行140。

更新：

对于您在评论中的第二个问题，您将有两个选项：

• 使用像hoverIntent这样的jQuery插件，或者在所有平台上像魅力一样工作的众多菜单插件之一
• 像这样写你的css：

添加这种新风格：

.leftMenu ul li div.post{
    position: absolute;
    top: 0px;
    left: 175px;
    z-index: 10;
    width: 413px;
    height: 100%;
    display: none;
}

.leftMenu ul li .pchild li:hover .post {
    display: block;
}

卸下：

padding-left: 20px;
display: none;
position: absolute;

.leftMenu ul li .pchild li:hover .childpost {
    display: block;
}

来自.leftMenu ul li .pchild li .childpost

在padding

上更改.leftMenu .child这样的值

padding: 0 24px 0 0!important;

Answer 2

这是一种方法：

.leftMenu .child {
    top:35px;
}

.leftMenu ul li {
    position:static;
}

子菜单元素相对于父li元素绝对定位。删除.leftMenu ul li元素上的相对位置或将其更改为static。此外，您还需要将top:35px添加到.leftMenu .child。