Grow your CSS skills. Land your dream job.

HELP! Menu z-index problems!

  • # June 2, 2013 at 12:37 pm

    I have been working on our site http://pineknotmarina.com for over a year now and I cannot get this problem fixed.

    I noticed recently that my CSS menu is fine on every single page except my home page.

    See it working here: http://pineknotmarina.com/bigbearboatrentals.html

    On my home page I have a javascript slideshow and a vertical menu and the drop-downs from the hover are **under** the javascript. I have tried everything I can think of to change the z-index but nothing seems to work right. Currently every menu css option is z-index: +6 and the javascript is z-index: -5

    I think this problem has something to do with the z-index but I am a bit of a beginner at CSS so it could be something else I don’t know.

    Can anyone offer some suggestions?

    # June 2, 2013 at 12:55 pm

    I can’t replicate the problem in FF, Safari, or Chrome on Mac OS X. What browser are you using? If earlier IE, try adding position: relative to both #menuleft and #maincontent

    # June 2, 2013 at 12:56 pm

    Without looking at your site yet….Z-index doesn’t take effect unless you set a positioning context IIRC.

    Try adding `position:relative` to the elements in question and see what happens.

    # June 8, 2013 at 2:19 pm

    Wolfcry, I get the problem in chrome and IE on PC for starters. My IE is 9.0. The menu on the left is fine but the hover over the options (“boat rentals”, “marina services”) fails to open the dropdown to the right. (actually i am pretty sure it is opening it, just behind the JavaScript)

    Paulie_D I changed the position to relative on the JavaScript and the container and redid the z back to auto but I still have the same problem.

    does not work here: http://pineknotmarina.com/index.html

    works properly here: http://pineknotmarina.com/bigbearboatrentals.html

    Are menus typically given a position value?

    # June 8, 2013 at 2:50 pm

    It works fine here on Windows 8, IE10 (and IE10 in IE9, 8 and 7 mode).

    # June 8, 2013 at 3:04 pm

    Maybe it is my system. I made several changes as recommended to the position values and that could have made a difference too. I’ll try it on a couple more systems tonight. Unfortunately, my operating system is vista so I can never really trust it.

    # June 8, 2013 at 4:06 pm

    It’s not working in real older versions of IE (IE7/IE8/IE9 mode in IE10 works just fine).

    Though, it’s not just a Javascript slideshow — it’s Flash. You should try adding the wmode transparent parameter to your Flash file (twice — once as a PARAM tag and once as an attribute to the EMBED tag):


    # June 14, 2013 at 11:49 am

    Yup, that worked. It seems it is mostly my work computer that is having the problem. I tried it on several other platforms and it worked just fine. I changed the positioning to relative too so that might have helped.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".