我如何设置我的菜单滑出，只有当标题悬停

How can I set up my menu to slide out, only when the header is hovered on?

本文关键字：悬停 标题 菜单 何设置 设置 我的      更新时间：2023-09-26

我如何设置我的菜单滑出，只有当标题悬停?我希望设置它的功能完全像这样:http://adirondack-demo.squarespace.com/

悬停时，它会滑出，但不会把内容往下推。

任何想法?jQuery，或者这可以通过CSS完成?

我想我会添加一个javascript版本的css动画可能是棘手的，往往不完全支持(虽然我不确定其他答案甚至使用动画，我似乎不能让它工作)。

这是我的:JsFiddle

bar为顶栏，baz为页面内容，foo为下拉框。鼠标悬停在bar上，foo会下降，但不会影响内容，因为它是绝对定位的。动画将它保持在bar的底部。请随意使用和提问

一个选项:如果菜单是标题的子元素。在这种(标记)情况下，您可以将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;
}
相关文章：