html - 如何在顶部对齐子菜单

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 行。

更新:

对于评论中的第二个问题，您将有两个选择:

• 使用 jQuery 插件，如 hoverIntent 或众多在所有平台上都非常有用的菜单插件之一
• 这样写你的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

像这样在 .leftMenu .child 上更改您的 padding 值

padding: 0 24px 0 0!important;