SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,401
    Mentioned
    147 Post(s)
    Tagged
    4 Thread(s)

    Unhappy pure css dropdown menu covers links above

    I'm really getting into CSS, and since I have very little experience, I guess you'll notice too

    Here's another question:

    I added this pure CSS dropdown menu to my site, and after some tweaking I got it to work with background images:

    http://www.galleons.it/sptest/

    It actually works perfectly in all browsers. The only problem I have is with FF, where the menu works great, but the clickable logo above the menu is 'covered' by the <li> and/or <a>'s of the menu and partially not clickable anymore. You can see the 'covering' with firebug.

    I tried adding some z-index, but that made no difference.

    Any solutions?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    HI,

    Just set the z-index like this:

    Code:
    .header h1,.statement,.primary-nav{
        position:relative;
        z-index:2;
    }
    .primary-nav{z-index:1;}

  3. #3
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,401
    Mentioned
    147 Post(s)
    Tagged
    4 Thread(s)
    Thanks Paul. So I needed the

    Code:
    position:relative;
    to make it work?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Yes only positioned elements can have a z-index applied. If the element is static then you can add position:relative without changing its appearance and then you can apply a z-index.

    In IE7 and under it's ultimately the positioned parent that needs to be controlled as that controls the stacking context for all it's children.

  5. #5
    SitePoint Wizard
    Join Date
    Oct 2005
    Posts
    1,769
    Mentioned
    5 Post(s)
    Tagged
    1 Thread(s)
    I did a ton of searching for CSS drop-down menus recently (horizontal menus). The problem was that all of the tutorials I found were not centered. They were left justified. Here is an excellent tutorial that shows you how to make a centered horizontal drop-down menu using only CSS (no javascript except for IE6. If you don't support IE6 like I do not, you don't need the JS).

    http://matthewjamestaylor.com/blog/c...dropdown-menus

    I am not using submenus in my menus. I don't suppose it would be too difficult to do that. Maybe someone with more knowledge than I possess could answer.

    You can tweak the CSS to style the menus any way you like. That tutorial linked to above is simply the best in my opinion.


Bookmarks

Posting Permissions

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