Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Aug 2005
    Location
    Canada
    Posts
    137
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question Absolute position without moving other elements.

    Here's an example of what I'm trying to accomplish.
    Code:
    <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>
    Code:
    #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.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    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.

  • #3
    Regular Coder
    Join Date
    Aug 2005
    Location
    Canada
    Posts
    137
    Thanks
    2
    Thanked 0 Times in 0 Posts
    What I want is it to be accordion-style so that the whole menu moves down with it.

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    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.

  • #5
    Regular Coder
    Join Date
    Aug 2005
    Location
    Canada
    Posts
    137
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •