仅当标题悬停在上方时，如何设置菜单才能滑出？

Question

仅当标题悬停在上方时，如何设置菜单才能滑出？ 我希望将其设置为完全像这样运行： http : //adirondack-demo.squarespace.com/

因此，在悬停时，它会滑出，但不会压低内容。

有任何想法吗？ jQuery，还是可以通过CSS完成？

Answer 1

以为我会添加一个JavaScript版本，因为CSS动画可能很棘手，而且通常不受完全支持（尽管我不确定其他答案甚至使用动画，而且我似乎也无法使其正常工作）。

这是我的： JsFiddle

bar是顶部栏， baz是页面内容， foo是下拉菜单。 在bar鼠标悬停时， foo会下拉而不影响其内容，因为它的位置是绝对的。 动画将其保留在bar的底部。 随意使用它并提出问题。

Answer 2

一种选择：如果菜单是标题的子元素。 在这种情况下，您可以设置position: relative; 到标题和position: absolute; 到菜单元素以将一个放置在另一个下方。 使用CSS :hover伪类使菜单可见。

#header {
    position: relative;
}
#main-menu {
    position: absolute;
    top: 100%

    display: none;
}

#header:hover #main-menu,
#header #main-menu:hover {
    display: block;
}

如果希望菜单保持打开状态，如果用户用光标越过边界，则可以在菜单周围使用其他包装纸。 该包装器将成为display设置的目标。 然后，您可以为该透明包装分配一个您选择的填充。 只要光标在包装器元素的填充内，菜单就保持可见。

#main-menu-wrapper {
    display: none;
    padding: 5em;
}

#header:hover #main-menu-wrapper {
#header #main-menu-wrapper:hover {
    display: block;
}