CSS menu not rendering correctly in IE - css

Question

The menu that I built works correctly in all other browsers except IE - what a surprise.
jsfiddle of menu: http://jsfiddle.net/JazParkyn/6jshy/19/
not sure that the fiddle will help though as the menu works correctly on here when viewed in ie, so i'm guessing that it's something to do with my template. I've used the IE edge code and that has made everything else on the site work, does anyone have any ideas?
css:
nav ul ul {
z-index:100;
opacity: 0;
visibility: hidden;
transition: all .5s ease-in;
-o-transition: all .5s ease-in;
-ms-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-webkit-transition: all .5s ease-in;
}
nav ul li:hover > ul {
z-index:100;
visibility: visible;
opacity: 1;
}
nav ul {
background: #355E95;
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
padding: 0 20px;
border-radius: 10px;
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: #1881B4;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block;
padding: 20px;
color: #ffffff;
text-decoration: none;
}
nav ul ul {
background: #355E95;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #D5EEFF;
border-bottom: 1px solid #D5EEFF;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #1881B4;
}
nav ul ul ul {
position: absolute;
left: 100%;
top:0;
}
Any suggestions would be appreciated
This is happening in IE10 and i've forced standards mode with the ie edge meta tag. the jsfiddle will work fine in ie, just not the actual web page.
EDIT: i've just put the following css in and it now magically works
html {
-webkit-font-smoothing: antialiased;
}
However, I still have the issue of the font not rendering properly in safari and opera, i'm guessing something to do with their rendering machines - the font appears to be heavier in weight, has anyone had this happen before?

Answer 1

hmm, the fiddle is working in IE. on your page I would add in the
menu.css (line 51)
#nav ul li {
/* leave the other properties here */
position:relative;
}
and for the submenu (line 56)
#nav ul ul {
/* leave the other properties here */
left:0;
}
Maybe you can add a property to the separator class (just for visual feedback) :
.separator {
cursor: pointer;
}