Grow your CSS skills. Land your dream job.

CSS Only Nav – Sub nav not working in IE9 Why?

  • # May 21, 2013 at 4:33 pm

    Hey Guys,

    I’m trying to get the sub menus working in IE9, the shadow around the ul is showing up, but the sub menus do not, can you help?

    http://codepen.io/Presto/pen/tznHh

    # May 21, 2013 at 7:43 pm

    remove the z-index from .navigation.navbar

    # May 22, 2013 at 10:29 am

    That fixed it, thanks

    # May 22, 2013 at 11:28 am

    Ok, I thought it was fixed but I guess I was wrong, here is a link to the test site: http://test.cswapps.com/sites/pacificrealestate/

    UPDATE: Its working great in Chrome and Safari, just not in IE :o/

    # May 22, 2013 at 1:25 pm

    The whole header needs a bit of work. There’s conflicting margins and backgrounds + some missing styles for the fixed navbar.

    If you scroll down the page in IE, you’ll notice the menu appears once you get past the header. Your logo / the main “banner” image are the likely culprits there.

    I’d also recommend investing in some HoverIntent functionality for the menu.

    # May 22, 2013 at 2:28 pm

    Thanks for the reply mcjohnst,

    I think I have it almost working now, the drop downs show up in IE when you hover over the parent items, but when you go to hover over the child items the sub menu go away.

    # May 22, 2013 at 2:33 pm

    Grrr, the problems where getting caused by the background image I had set. I had the image set to:
    position:absolute;
    z-index:0;
    and the container set to:
    position:relative;
    z-index:2;

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

You must be logged in to reply to this topic.

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