0

如果您在 FireFox 中尝试：http:
//jsfiddle.net/rJUKT/2/

它工作正常。下拉菜单显示在其父级的底部，如下所示：
下拉菜单工作正常

但是如果你用 IE7 试试，下拉菜单会显示在右边，像这样：
IE7 中的错误

知道为什么会这样吗？

HTML 

<meta http-equiv="X-UA-Compatible" content="IE=7" />
    <ul id="menu">
    <li>
        <span>Menu 1</span>
        <ul>

            <li><a href="">Link 1.1</a></li>
            <li><a href="">Link 1.2</a></li>
            <li><a href="">Link 1.3</a></li>
            <li><a href="">Link 1.4</a></li>
        </ul>
    </li>

    <li>
        <span>Menu 2</span>
        <ul>
            <li><a href="">Link 2.1</a></li>
            <li><a href="">Link 2.2</a></li>
            <li><a href="">Link 2.3</a></li>
            <li><a href="">Link 2.4</a></li>
        </ul>
    </li>
</ul>

CSS 

#menu { width: 100%; float: right; list-style: none; margin-top: 5px; color: #2A4153; }
#menu li {
    float: left;
    font-size: 17px;
    font-weight: bold;
    background-color: #e1f1ff;
    border:  1px solid #93b5d4;
    margin: 0 1px 0 1px;
    padding: 4px 0 0 0;
    border-bottom: none;
    height: 20px;
}

#menu li a, #menu li span { padding: 4px 7px 2px 7px; cursor: pointer;  }

#menu li ul {
    clear: both;
    position:absolute;
    display:none;
    padding:0;
    list-style:none;
    width: 150px;
    margin: -1px 0 0 -2px;
}

#menu li ul li {
    float: left;
    width: 150px;
    border:  1px solid #93b5d4;
    border-top: none;
    font-size: 15px;
    font-weight: normal;
    background-image: url('16x16/eye.png');
    background-position: 4px 4px;
    background-repeat: no-repeat;
    -moz-border-radius: 0;
}
#menu li ul li a, #menu li ul li span { display:block; padding-left: 25px; }
#menu li ul li:hover { background-color: #e5f6e8; border:  1px solid #93d4a2; border-top: none; }

#menu li:hover { background-color: #e5f6e8; border: 1px solid #93d4a2; border-bottom: none; }

JS 

$(function() {

    $('#menu li').hover(
        function () {
            //show its submenu
            $('ul', this).slideDown(100);

        },
        function () {
            //hide its submenu
            $('ul', this).slideUp(100);        
        }
    );


});

谢谢！

4

3 回答 3

4

您需要为下拉 UL 设置“top”和“left”属性

于 2012-04-30T17:44:54.673 回答
3

你可以看看这个。在此更新了一些 css 属性

http://jsfiddle.net/vkVHC/

于 2012-04-30T18:20:11.427 回答
1

如果这是您使用 jQuery 的唯一原因（用于悬停时的下拉效果），您也可以使用 CSS 来代替（从而节省网站加载的许多 kB）。此外，阿列克谢的回答是正确的。

于 2012-04-30T18:25:03.493 回答