Grow your CSS skills. Land your dream job.

Firefox vs Chrome display:block / display:none

  • # December 2, 2012 at 8:16 pm

    I have a header menu system that shows/hides drop-down menu items using classical CSS2 syntax. In firefox it works fine, but in Chrome the dropdowns dont show properly. I am using a nested construction such as

    • top menu item

      • dropdown-menu item
      • next dropdown-menu item

    with CSS that’s set to display:block for the outer <ul> and display:none for the inner <ul>;
    then on hover over the outer <ul> the inner <ul> dynamically is set to display:block.

    CSS:

    .menu ul {display:block}
    .menu ul ul {display:none}
    .menu ul:hover ul {display:block}

    Why doesnt this work in Chrome?

    –PeterR
    This works for Firefox but not for Chrome?

    # December 2, 2012 at 11:27 pm

    Yes, works for Firefox but not for Chrome

    # December 3, 2012 at 1:36 am

    Without really looking into anything, you have invalid HTML markup. You aren’t closing the first <li> element you are opening.

    # December 3, 2012 at 3:58 am

    By the way, what is <menu>?

    # December 3, 2012 at 5:40 am

    As @hugogiraudel said. Menu is not a real element hence the styling problems.

    Also you’re CSS is styling .menu – so really you need to change menu to div class=”menu” or nav class=”menu” for great success.

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

You must be logged in to reply to this topic.

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