I created a menu that looks great in Chrome and in Firefox.
When I view it in IE 9 or 10 the menu has a completely different look (I do not have IE8)
The seond series of menu options should fall straight down under the first row with no cascading of buttons like they do in FireFox or in Chrome.
In IE they move to the right significantly. Also it adds ugly padding between each menu option.

Please view my code and see what might be causing this in IE or what might be missing. Any help would be greatly appreciated.
Website can be found here : http://www.nfipiservice.com/NFC/nfc2013/TEST/

My CSS is this

@charset "utf-8";



.SuperMenu {
width: 960px;
}

/* Menu CSS */

#menu192id15, #menu192id15 ul, #menu192id15 ul li, #menu192id15 ul li a{
padding: 0;
margin: 0;
line-height: 1;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 500;
font-size: 16px;
color: white;
-webkit-transition: all ease .3s;
-o-transition: all ease .3s;
-moz-transition: all ease .3s;
-ms-transition: all ease .3s;
transition: all ease .3s;

}

#menu192id15:before, #menu192id15:after, #menu192id15 > ul:before, #menu192id15 > ul:after {

content: "";
display: table;

}


#menu192id15:after, #menu192id15 > ul:after {

clear: both;

}

#menu192id15 a{


}

#menu192id15 ul{
-o-box-shadow: 0 1px 2px rgba(2, 2, 2, .25), inset 0 1px 1px rgba(255, 255, 255, .15);
/* [disabled]-moz-box-shadow: 0 1px 2px rgba(2, 2, 2, .25), inset 0 1px 1px rgba(255, 255, 255, .15); */
-ms-box-shadow: 0 1px 2px rgba(2, 2, 2, .25), inset 0 1px 1px rgba(255, 255, 255, .15);
width: 960px;
text-align: center;
background-color: #EEE;
}
#menu192id15 li {
float: left;
display: block;
}


#menu192id15 ul > li{
float: left;
list-style: none;
width: 160px;

}

#menu192id15 ul > li > a{
display: block;
text-decoration: none;
position: relative;
color: #00508F;
font-weight: normal;
line-height: 20px;
font-size: 15px;
font-family: Arial, Helvetica, sans-serif;
background-color: #EEE;
text-align: center;
padding-top: 10px;
padding-right: 2px;
padding-bottom: 10px;
padding-left: 2px;
border: 0.25px solid #E2E2E2;
}

#menu192id15 ul > li > a:hover{
-webkit-box-shadow: inset 0 0 1px #1f325d;
-o-box-shadow: inset 0 0 1px #1f325d;
-moz-box-shadow: inset 0 0 1px #1f325d;
-ms-box-shadow: inset 0 0 1px #1f325d;
-webkit-transition: all ease .3s;
-o-transition: all ease .3s;
-moz-transition: all ease .3s;
-ms-transition: all ease .3s;
transition: all ease .3s;
background-color: #9CF;
color: #FFF;

}

#menu192id15 ul > li > a:hover:before{
content: "";
z-index: 2;
position: absolute;
border: 1px solid white;
border-top: 0;
border-bottom: 0;
border-right: 0;
width: 100%;
height: 100%;
top: 0;
left: -1px;
opacity: .2;
text-align: center;

}

#menu192id15 ul > li > a:hover:after{
content: "";
z-index: 2;
position: absolute;
border: 1px solid white;
border-top: 0;
border-bottom: 0;
border-left: 0;
width: 100%;
height: 100%;
top: 0;
right: -1px;
opacity: .2;
text-align: center;

}

#menu192id15 > ul > li > ul{
opacity: 0;
visibility: hidden;
position: absolute;
width: 160px;

}

#menu192id15 > ul > li:hover > ul{

opacity: 1;
visibility: visible;
position: absolute;
border-radius: 0 0 3px 3px;

}

#menu192id15 > ul > li > ul{
width: 160px;
position: absolute;

}

#menu192id15 > ul > li > ul > li{
float: none;
position: relative;
padding-top: 0px;

}
#menu192id15 > ul > li > ul > li > a {
background-color: #CCCCCC;
color: #00508F;
}
#menu192id15 > ul > li > ul > li > a:hover {
background-color: #3399CC;
color: #FFF;
}


#menu192id15 > ul > li > ul > li > ul{
opacity: 0;
visibility: hidden;
position: absolute;
}

#menu192id15 > ul > li > ul > li:hover > ul{
opacity: 1;
visibility: visible;
position: absolute;

}

#menu192id15 > ul > li > ul > li > ul{
left: 160px;
top: 1px;
width: 160px;

}

#menu192id15 > ul > li > ul > li > ul > li{
float: none;
padding-top: 0px;

}
#menu192id15 > ul > li > ul > li > ul > li > a{
background-color: #ECF4FF;
border: 0.25px solid #E2E2E2;
}