IE9 CSS drop down menu is not working

  • zakkates

    (@zakkates)


    12 years ago

    Here is my site:

    https://s452419959.onlinehome.us/

    I’m using CSS for the menu.

    Menu is set to “nav ul ul {display:none}” and then on “nav ul li:hover ul {display:block;} “

    It works in all other browsers except IE9 (and below obviously).

    Apparently from the forums I’ve read that IE9 and below do not recognize “:hover” on the “li” attribute, that it will only be recognized on the “a” attribute. However, wordpress only prints its menu with the secondary “ul” after the “a”.

    Please help! I’ve wasted hours on this!

    Thank you!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    If you’re ever wondering about which browsers support types of CSS selectors, try this website for guidance;
    https://www.quirksmode.org/css/contents.html

    Edit: By looking at your code, you have some inline-block styles in your navigation. That’s bound to break in older versions of IE if that’s what you’re experiencing. Use either block or inline.

    Thread Starter zakkates

    (@zakkates)

    I’ve seen other sites use all CSS on their WordPress Menus and even use the “nav ul li:hover li {display:block;}” and it works.

    Here’s an example:

    https://cecraig.hhdev.hothousemarketing.com/

    I figured there must be some IE9 and below hack to make it work.

    I’m using MODERNIZER.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘IE9 CSS drop down menu is not working’ is closed to new replies.