我创建了一个简单的 jQuery 下拉菜单。在 FF、Chrome、ie9 中工作。但是，它在 ie 兼容模式下不起作用。
HTML：
<div class="navBarCont">
<ul class="navBar gradient shadow" id="navBar">
<li><a href="index.html">Home</a></li>
<li class="selected"><a href="about_us.html">About Us</a></li>
<li><a href="faq.html">FAQs</a></li>
<li>Upcoming Events / News</li>
<li>Educational
<ul class="subnav">
<li><a href="osteooftheknee.html">Osteoarthritis of the Knee</a></li>
<li><a href="benefitsofexercise.html">Benefits of Exercise</a></li>
<li><a href="didyouknow.html">Did You Know?</a></li>
</ul>
</li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
JS：
$(document).ready(function(){
$('.navBar li').hover(function () {
$('ul', this).stop().slideDown(100);
}, function () {
$('ul', this).stop().slideUp(100);
});
});
CSS：
.navBarCont {
位置：相对；
顶部：-15px；
z-index：自动；
宽度：714px；
边距：0 自动；
背景：#fff;
}
.navBar {
光标：指针；
z 指数：95；
位置：相对；
高度：28px；
向左飘浮;
颜色：#ffffff；
字体系列：arial；
字体大小：0.97em；
-webkit-border-radius：5px；
-moz-边界半径：5px；
边框半径：5px；
背景：#fff;
}
.navBar>li {
向左飘浮;
显示：块；
高度：23px；
右边框：细实线#ffffff；
填充：5px 18px 0；
位置：相对；
背景：RGB（109,179,242）；/* 旧浏览器 */
/* IE9 SVG，需要有条件地覆盖 'filter' 到 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzZkYjNmMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzU0YTNlZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzM2OTBmMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxZTY5ZGUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
背景：-moz-linear-gradient（顶部，rgba（109,179,242,1）0％，rgba（84,163,238,1）50％，rgba（54,144,240,1）51％，rgba（30,105,222,1）100％）；/* FF3.6+ */
背景：-webkit-渐变（线性，左上，左下，颜色停止（0％，rgba（109,179,242,1）），颜色停止（50％，rgba（84,163,238,1）），颜色停止（51 %, rgba(54,144,240,1)), color-stop(100%, rgba(30,105,222,1))); /* Chrome,Safari4+ */
背景：-webkit-linear-gradient（顶部，rgba（109,179,242,1）0％，rgba（84,163,238,1）50％，rgba（54,144,240,1）51％，rgba（30,105,222,1）100％）；/* Chrome10+,Safari5.1+ */
背景：-o-linear-gradient（顶部，rgba（109,179,242,1）0％，rgba（84,163,238,1）50％，rgba（54,144,240,1）51％，rgba（30,105,222,1）100％）；/* 歌剧 11.10+ */
背景：-ms-线性梯度（顶部，rgba（109,179,242,1）0％，rgba（84,163,238,1）50％，rgba（54,144,240,1）51％，rgba（30,105,222,1）100％）；/* IE10+ */
背景：线性梯度（顶部，rgba（109,179,242,1）0％，rgba（84,163,238,1）50％，rgba（54,144,240,1）51％，rgba（30,105,222,1）100％）；/* W3C */
过滤器：progid:DXImageTransform.Microsoft.gradient(startColorstr='#6db3f2', endColorstr='#1e69de', GradientType=0); /* IE6-8 */
文本对齐：居中；
}
.navBar li:hover, .arthritis .title a:hover {
背景：#a5cdef；/* 旧浏览器 */
背景：-moz-linear-gradient（顶部，#a5cdef 0%，#4e8edb 50%，#337add 51%，#163a9e 100%）；/* FF3.6+ */
背景：-webkit-渐变（线性，左上角，左下角，颜色停止（0%，#a5cdef），颜色停止（50%，#4e8edb），颜色停止（51%，#337add），颜色-停止（100%，#163a9e））；/* Chrome,Safari4+ */
背景：-webkit-linear-gradient（顶部，#a5cdef 0%，#4e8edb 50%，#337add 51%，#163a9e 100%）；/* Chrome10+,Safari5.1+ */
背景：-o-linear-gradient（顶部，#a5cdef 0%，#4e8edb 50%，#337add 51%，#163a9e 100%）；/* 歌剧 11.10+ */
背景：-ms-linear-gradient（顶部，#a5cdef 0%，#4e8edb 50%，#337add 51%，#163a9e 100%）；/* IE10+ */
背景：线性渐变（到底部，#a5cdef 0%，#4e8edb 50%，#337add 51%，#163a9e 100%）；/* W3C */
过滤器：progid:DXImageTransform.Microsoft.gradient(startColorstr='#a5cdef', endColorstr='#163a9e',GradientType=0); /* IE6-9 */
}
.navBar li.selected>a,
.navBar li.selected{
颜色：#ffffb9；
}
.navBar li.selected {
背景：#a5cdef；/* 旧浏览器 */
背景：-moz-linear-gradient（顶部，#a5cdef 0%，#4e8edb 50%，#337add 51%，#163a9e 100%）；/* FF3.6+ */
背景：-webkit-渐变（线性，左上角，左下角，颜色停止（0%，#a5cdef），颜色停止（50%，#4e8edb），颜色停止（51%，#337add），颜色-停止（100%，#163a9e））；/* Chrome,Safari4+ */
背景：-webkit-linear-gradient（顶部，#a5cdef 0%，#4e8edb 50%，#337add 51%，#163a9e 100%）；/* Chrome10+,Safari5.1+ */
背景：-o-linear-gradient（顶部，#a5cdef 0%，#4e8edb 50%，#337add 51%，#163a9e 100%）；/* 歌剧 11.10+ */
背景：-ms-linear-gradient（顶部，#a5cdef 0%，#4e8edb 50%，#337add 51%，#163a9e 100%）；/* IE10+ */
背景：线性渐变（到底部，#a5cdef 0%，#4e8edb 50%，#337add 51%，#163a9e 100%）；/* W3C */
过滤器：progid:DXImageTransform.Microsoft.gradient(startColorstr='#a5cdef', endColorstr='#163a9e',GradientType=0); /* IE6-9 */
}
.navBar>li:last-child {
右边界：无；
-webkit-border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
边框半径：0 5px 5px 0；
}
.navBar>li:first-child {
-webkit-border-radius：5px 0 0 5px；
-moz-边界半径：5px 0 0 5px；
边框半径：5px 0 0 5px；
}
.navBar ul {
位置：绝对；
左：0；
文字装饰：无；
列表样式：无；
显示：无；
填充：10px；
文本对齐：左；
边框顶部：无；
z 指数：90；
顶部：28px；
颜色：#fff;
-moz-border-radius-topleft：0px；
-moz-border-radius-topright：0px；
-moz-border-radius-bottomright：5px；
-moz-border-radius-bottomleft: 5px;
-webkit-border-radius：0px 0px 5px 5px；
边框半径：0px 0px 5px 5px；
背景：#6db3f2；/* 旧浏览器 */
背景：-moz-linear-gradient（顶部，#6db3f2 0%，#1e69de 100%）；/* FF3.6+ */
背景：-webkit-渐变（线性，左上，左下，颜色停止（0％，#6db3f2），颜色停止（100％，#1e69de））；/* Chrome,Safari4+ */
背景：-webkit-linear-gradient（顶部，#6db3f2 0%，#1e69de 100%）；/* Chrome10+,Safari5.1+ */
背景：-o-linear-gradient（顶部，#6db3f2 0%，#1e69de 100%）；/* 歌剧 11.10+ */
背景：-ms-线性梯度（顶部，#6db3f2 0%，#1e69de 100%）；/* IE10+ */
背景：线性渐变（到底部，#6db3f2 0%，#1e69de 100%）；/* W3C */
过滤器：progid:DXImageTransform.Microsoft.gradient(startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0); /* IE6-9 */
}
.navBar 一个 {
颜色：#fff;
文字装饰：无；
}
.navBar ul li {
明确：两者；
向左飘浮;
填充：5px；
右边界：无；
}
.navBar ul li a {
颜色：#fff;
文字装饰：无；
}