Pseudo selector nth-of-type problem

Hi guys

New to the forum and would just like a little help with pseudo selectors and IE9. My HTML code is...

<div class="top-menu">
<ul>
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
<li><a href="#">Item six</a></li>
</ul>
</div>

and my CSS is...

.top-menu li:nth-of-type(3n+1) { background-color: #91dad6; }
.top-menu li:nth-of-type(3n+2) { background-color: #003f40; }
.top-menu li:nth-of-type(3n+3) { background-color: #ff9b0c; }

This all works fine in Firefox, Chrome and Safari but in IE9, which does apparently support nth-of-type it doesn't work. It simply doesn't show the background color at all.

Any ideas what I need to do to get it to work?

You are most likely inside of "Compatibility mode" in IE
This makes IE act like the older versions of IE - change it back to IE9, and it should work fine.

Cheers