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 に答える