Bootstrap dropdown not appearing in IE9 - css

Question

Currently I'm wordpressing a site that is using Bootstrap, and the .dropdown-menu is not appearing in IE8 (and, more importantly, IE9).
From my readings I discovered that there is a filter in navbar that causes this issue. Probably is neither the .navbar or the .dropdown class contain the filter. And I'm not even using the class .navbar, just .dropdown & dropdown-menu.
I would love some input on how to fix this. I'm using SCSS:
.header {
height:90px;
.brand {
height: 90px;
width: 246px;
background: url(../images/logo.png) no-repeat center;
display: block;
float: left;
}
nav {
padding-top:36px;
font-family:$tdSemibold;
ul, li {
padding: 0;
margin: 0;
list-style: none;
}
& > ul {
& > li {
display: inline-block;
margin-left:40px;
z-index: 9999;
& > a {
color: white;
text-transform: uppercase;
font-size: 16px;
letter-spacing:1px;
display:block;
height:30px;
& > span.caret {
display: none;
}
&:hover {
color: #85c1eb;
text-shadow: -1px -1px 0 #{darken(#85c1eb, 40%)};
}
}
&.dropdown:hover > .dropdown-menu {
background: #fff;
z-index: 9999;
display: inline-block;
}
}
}
.dropdown-menu {
background: #fff !important;
border-radius: 0;
#include boxShadow(0 0 5px rgba(0,0,0,.15));
&:before {
content: " ";
display: block;
position: absolute;
top: -5px;
left: 5px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid white;
z-index: 9999;
}
li {
border-bottom: 1px dashed #eee;
background: #fff;
z-index: 9999;
&:last-child {
border-bottom: none;
}
}
a {
padding: 8px 15px;
font-size: 14px;
color: $blue;
&:hover {
color:white;
}
}
}
}
}