1

我创建了一个简单的 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;
        文字装饰：无；
    }
4

1 回答 1

1

尝试这个

$(document).ready(function(){
    $('.navBar li').hover(function () {
           $('ul', this).stop(true,true).slideDown(100);
}, function () {
    $('ul', this).stop(true,true).slideUp(100);
});​
   });
于 2012-08-29T15:18:00.770 回答