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

Question

How can I set up my menu to slide out, only when the header is hovered on? I'm looking to set it up to function exactly like this: http://adirondack-demo.squarespace.com/

So on hover, it slides out, but doesn't push the content down.

Any ideas? jQuery, or can this be done VIA CSS?

Answer 1

Thought I'd add a javascript version as css animations can be tricky and are often not fully supported (though I'm not sure the other answer even uses animations and I can't seem to get it working).

Here is my: JsFiddle

bar is the top bar, baz is the page content and foo is the drop-down. On mouseover of bar , foo drops down without effecting the content, because it is positioned absolutely. The animation keeps it at the bottom of bar . Feel free to play with it and ask questions.

Answer 2

One option: if the menu is a child element of the header. In that (markup) case you could set position: relative; to the header and position: absolute; to the menu element to position the one below the other. Use the CSS :hover pseudo class to make the menu visible.

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

    display: none;
}

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

If you want the menu to stay open, if the user crosses the border with his/her cursor, you may use an additional wrapper around the menu. That wrapper would become the target of the display settings. You could then assign that transparent wrapper a padding of your choice. The menu stays visible as long as the cursor is within the padding of the wrapper element.

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

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