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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Positioning inner UL to outer UL

    Hey all,

    I'm having a problem building a menu using ul elements. The menu looks something like this:

    Code:
        <ul class="level0">
    	<li id="nav-1-1" class="level1"><span> Option1 </span>
    	<ul id="submenu" class="">
    		<li class="level2" first="" nav-2-2="">
    		<li class="level2" first="" nav-2-2="">
    		<li class="level2" first="" nav-2-2="">
    	</ul>
    	</li>
    	<li id="nav-1-1" class="level1"><span> Option2 </span>
    	<ul id="submenu" class="">
    		<li class="level2" first="" nav-2-2="">
    		<li class="level2" first="" nav-2-2="">
    		<li class="level2" first="" nav-2-2="">
    	</ul>
    	</li>
    </ul>
    I would like to position all of the inner ul elements (two in this case) to a specific place relative to outer ul element (for example top right corner of the outer ul) and not the li that contains them. Is this possible at all, without using the position: fixed ?Any help is greatly appreciated!

  • #2
    New Coder
    Join Date
    Dec 2011
    Location
    San Francisco, CA
    Posts
    24
    Thanks
    0
    Thanked 5 Times in 5 Posts
    You have an error in your source code.

    Your LI tag inside the UL are not closed.

    The solution to your problem:

    try:

    Code:
    <li style = "position: absolute; top:0; left:0; width:200px; height: 20px;"></li>
    (please close your LI tags!)

    width and height are whatever you want them to be

    Of course, you can make the CSS external, but you get the idea

    Important:

    In order for this to work, make sure the UL container has "relative" positioning:

    Code:
    <ul style = "position:relative">
    good luck
    Hi, I'm Greg. I am a web designer.
    I like to share my knowledge with others.
    Web design costs calcuator | jQuery plugin tutorial
    Make cinnamon french toast | bora

  • #3
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes, the code I posted is just an example, more of a pseudo-code, the real code is a bit more complex and quite long to put in here. Sorry 'bout that.

  • #4
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Anyway, this is the site that you can see how it looks at the moment:
    http://colijn.staging.levi9.com/meubelplaza/
    If you'd select filter a drop-down menu will appear, and then you can hover over different options in that menu. Each option has a sub-menu that opens to the right, but at a different top position. What i would like is that all of these sub-menus open at the same position.


  •  

    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
    •