Forums

alulaq2

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

  <menu>
  <ul><li>top menu item
         <ul><li>dropdown-menu item</li>
                 <li>next dropdown-menu item</li>
        </ul>
  </ul>
  </menu>

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?

alulaq2

Yes, works for Firefox but not for Chrome

jamy_za

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

HugoGiraudel

By the way, what is <menu>?

AndyHowells

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.

treehouse : what would you like to learn today?

Forums

Firefox vs Chrome display:block / display:none