0

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

查询：

    $(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 中，它们确实有问题……在正确的位置，但仅部分显示并且功能（向上/向下滑动）不正确。

4

0 回答 0