#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Posts
    12
    Rep Power
    0

    challenge: css overlap dropdown


    I am sitting here with a css challenge and I cannot even start to imagine how to do it. In fact, I think it is impossible to do, but just thought I'd ask you guys in case I am wrong:

    I want to create a dropdown menu (something like coolmenus) that can be created dynamically out of a database.

    The first thing I want to happen is that all primary navigation items are lined up horizontally next to eachother. That one was easy: I put each item into a DIV and float them left.

    Now the problem: whenever a user moves the mouse over a primary navigation item, a dropdown menu will appear underneath it. However (!), this dropdown menu may be wider than the DIV above it! Here an example:

    ------------- -------------
    | Item 1 | | Item 2 |
    ------------- -------------
    -----------------------
    | Dropdown 1 |
    -----------------------
    -----------------------
    | Dropdown 2 |
    -----------------------

    The problem I see is that I want the dropdown menu to always be left aligned with the primary navigation item. As I don't know the absolute position of either of them (being created dynamically out of a database), the only way to get the left alignment is to write the DIVs (primary item and its dropdown) directly after each other in the code. However, if I do that I cannot get the primary navigation items to appear one next to each other. Well, I could, but they wouldn't overlap with the dropdowns as I want them to.

    To give you an idea of what I am trying to achieve, have a look at the dropdown here:

    http://www.rmitenglishworldwide.com/...s/products.asp
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2003
    Posts
    288
    Rep Power
    12
    Use un-ordered lists for each of your main menu items & the drop downs i.e.

    Code:
    <ul>
    	<li>Item 1
    		<ul>
    			<li>Sub item 1</li>
    			<li>Sub item 2</li>
    		</ul>
    	</li>
    	<li>Item 2
    		<ul>
    			<li>Sub item 1</li>
    		</ul>
    	</li>
    </ul>
    And do some formatting with CSS (see this article).

    Its both the semantically correct way & the best way to describe your list in HTML. But requires a little CSS magic to help it along the way.

    -D
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Posts
    12
    Rep Power
    0
    Hi DEFusion,

    I was half way on the right way. I did have the ULs originally, but then I thought it will get me into trouble if I try to position half of them absolut and the other half not. So I took them out again.

    I will give the code a try. It looks good to me, but unfortunately the examples don't work at the moment.

    Thanks for your help!

IMN logo majestic logo threadwatch logo seochat tools logo