...

View Full Version : Absolute position without moving other elements.



marcus1060
08-06-2010, 06:36 PM
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.

SB65
08-06-2010, 07:30 PM
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.

marcus1060
08-06-2010, 08:49 PM
What I want is it to be accordion-style so that the whole menu moves down with it.

SB65
08-07-2010, 07:49 AM
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.

marcus1060
08-12-2010, 02:49 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum