Internet Explorer 9 doesn't display CSS Dropdown Menu's correctly...?

Question

I am working on a CSS-based drop down navigation menu for a HTML webpage. It renders perfectly under Google Chrome, Mozilla Firefox, and Mobile Safari, the problem is Internet Explorer 9. Instead of displaying as a bar, it displays everything with bullets like a CSS script wasn't assigned to it. My HTML is the standard

    <link href="menu.css" rel="stylesheet" />

and

    <nav><ul><li><ul>ITEM_NAME<a href="LINKS"></ul></li></ul></nav>

format.

My CSS script looks like this:

    nav {
margin: auto; 
text-align: center;
    }

    nav ul ul {
display: none;
    }

nav ul li:hover > ul {
    display: block;
}


    nav ul {
background: #000;
list-style: none;
position: relative;
display: inline-table;
    }
nav ul:after {
    content: ""; clear: both; display: block;
}

nav ul li {
    float: left;
}
    nav ul li:hover {
        background: #FF6600;
    }
        nav ul li:hover a {
            color: #fff;
        }

    nav ul li a {
        display: block; padding: 10px 10px;
        color: #fff; text-decoration: none;
    }


nav ul ul {
    background: #000; padding: 0;
    position: absolute; top: 100%;
}
    nav ul ul li {
        float: none; 
        border-top: 1px solid #333;
                    border-left: 2px solid #333;
                    border-right: 2px solid #333;
        border-bottom: 1px solid #333; 
                    position: relative;
    }
        nav ul ul li a {
            padding: 10px 10px;
            color: #fff;
        }   
            nav ul ul li a:hover {
                background: #FF6600;
            }

nav ul ul ul {
    position: absolute; left: 100%; top:0;
}

Any ideas to what I need to do to make this render correctly in Internet Explorer 9? :) Thanks, Sean.

I'm testing it in IE9, on Windows 7 64-bit. I would think if it doesn't work on 9, it DEFIANTLY won't work on IE8 or 7 — , Oct 11 '12 at 22:21
You would think so, but IE8 *supposedly* supports `:hover` on all elements. — william44isme, Nov 26 '13 at 22:33

score 2 · Answer 1 · edited May 23 '17 at 12:22

2

Not all versions of IE can understand the nav tag. There are some workarounds as detailled here:

html5 new elements (header, nav, footer, ..) not working in IE

edited May 23 '17 at 12:22

Community

1
1

answered Oct 11 '12 at 21:46

Kai Mattern

3,090
2
34
37

Following on from that link, you could also just not use the new elements, if you have to depend on non-JavaScript IE. – Steve Oct 11 '12 at 22:20
This is IE 9, so it *should.* – william44isme Nov 26 '13 at 22:35

score 0 · Answer 2 · answered Oct 11 '12 at 21:44

0

I'd said it's probably the display: inline-table; which IE isn't happy about. Could you use inline-block instead? Then to get rid of the dots, list-style: none

answered Oct 11 '12 at 21:44

AtkinsSJ

482
2
8

The issue here is, it's my School's webpage, and it needs to be able to render in old IE7/8 Windows XP machines... or anywhere for that matter, Or i'd do that ASAP. Tried the `display: inline-table;` and already had `list-style: none`, It still insists on displaying as a list. – Oct 11 '12 at 22:10
also, I'm new, the first part was aimed at the first comment.. oops XD – Oct 11 '12 at 22:10
If it needs to render on any device, then maybe a javascript solution would be more appropriate. CSS can do wonderful things, but only in a modern browser. – william44isme Nov 26 '13 at 22:36

Internet Explorer 9 doesn't display CSS Dropdown Menu's correctly...?

2 Answers2