Question

我的下拉菜单的.hover功能在Chrome，FF，Safari和IE9 + 10中运行良好。但是当我在IE7 + 8中测试它们时，它们会中断。在网上搜索答案之后，我尝试添加缩放：1;到我的CSS中的下拉菜单，因为.slideUp / Down无法识别position：relative; IE7中的元素。仍然没有找到解决方案......有人可以帮忙吗？

JQuery的：

    $(document).ready(function () {
        $('div.dropNavOne').hover(
            function () {
                $('ul.menu_body1').stop(true, true).slideDown(600);
            },
            function () {
                $('ul.menu_body1').stop(true, true).slideUp(600); 
        });
    });

HTML：

    <div class="dropNavOne" class="gradient">
        <ul>
            <li><a href="#">I am a...</a>
                <ul class="menu_body1">
                    <li><a href="#">Option 1</a></li>
                    <li><a href="#">Option 2</a></li>
                    <li><a href="#">Option 3</a></li>
                </ul>
            </li>
        </ul>

相关CSS：

    .dropNavOne, .dropNavTwo {
float: left;
margin-top:10px;
padding-right: 5px;
height: 30px;
width: 200px;
    }

    .dropNavOne ul ul, .dropNavTwo ul ul {
display: none;
    }

    .dropNavOne ul, .dropNavTwo ul {
position: relative;
zoom: 1;
background: #bbbbbb;
padding: 0 5px; 
list-style: none;
display: inline-table;
margin: auto;
width: 190px;
opacity: 0.9;
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
border-radius: 3px;
    }
.dropNavOne ul:after, .dropNavTwo ul:after {
    content: ""; clear: both; display: block;
}

    .dropNavOne ul li, .dropNavTwo ul li {
position: relative;
zoom: 1;
width: 190px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
    }
.dropNavOne ul li:hover, .dropNavTwo ul li:hover {
    position: relative;
    zoom: 1;
    background: #5e5e5e;
}

    .dropNavOne ul li:hover a, .dropNavTwo ul li:hover a {
        color: #c7c7c7;
    }

.dropNavOne ul li a, .dropNavTwo ul li a {
    display: block; padding: 5px;
    color: black; text-decoration: none;
}

    .dropNavOne ul ul, .dropNavTwo ul ul {
zoom: 1;
background: #5e5e5e; padding: 0;
position: absolute; top: 100%;
border-top-right-radius: 3px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
width: 275px;
opacity: 0.9;
filter: alpha(opacity=90);
    }
.dropNavOne ul ul li, .dropNavTwo ul ul li {
    border-top: 1px solid #6b6b6b;
    border-bottom: 1px solid #494949;
    width: 275px;
}
    .dropNavOne ul ul li a, .dropNavTwo ul ul li a {
        padding: 5px 10px;
        color: #c7c7c7;
    }   
        .dropNavOne ul ul li a:hover, .dropNavTwo ul ul li a:hover {
            background: #333333;
        }

在IE7中，下拉列表根本没有显示，而在IE8中，它们确实是错误的...在正确的位置但只是部分显示并且功能（向上/向下滑动）不正确。

JQuery下载悬停.slideDown和.slideUp在IE7 + 8中断

0 个答案: