Absolute position without moving other elements.

Here's an example of what I'm trying to accomplish.

<div id="sidebar">
<ul id="menu">
<li>Item 1
<ul>
<li>Child 1</li>
<li>Child 2</li>
<li>Child 3</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3
<ul>
<li>Child 1</li>
<li>Child 2</li>
</ul>
</li>
</ul>
<div id="another-element"></div>
<div id="another-another-element"></div>
</div>


#sidebar {
width:200px;
}

#menu li ul {
display:none;
}

#menu li ul:hover {
display:block;
}

What I want to happen though, is I want to keep the items following the menu in the same position even if the child elements of the list are being displayed.
So the menu would overlap over top of the bottom elements.
I can do this easily in Javascript, I would just like to know if it's possible in HTML/CSS.

Thank you.

Set position:relative on #menu li and then use position:absolute on #menu li ul to position the sub menu, using, for example, top and left settings as required. Using position:absolute removes the sub menu from the flow of the document and hence subsequent elements are not affected.

What I want is it to be accordion-style so that the whole menu moves down with it.

So you want thewhole menu to expand over the top of subsequent elements - rather than drop downs or flyouts to appear over the top?

In that case the whole menu (ul#menu) needs to be positioned absolutely, but with sufficient space so that in its unexpanded form it doesn't overlap anything.

For example, if the menu in it's unexpanded state is 200px high position this absolutely within #sidebar. Give your #another-element div a 210px margin-top (say) - then you've got a 10px gap with the menu unexpanded. Then, on :hover the menu will expand over the top of #another-element.

Yeah, that was my initial thought too. However the problem is that the menu's size isn't static. It's being used in a CMS so more links can be added etc.