0

次のCSSメニューがあります：

http://img233.imageshack.us/img233/4268/screenshot006jw.png

メニューはどこでも正常に動作しますが、IE6 と IE7 では機能します。

ここにいくつかのコードがあります：

CSS (主に IE 用、他のブラウザーでも同様):

.menu {
    height:25px; 
    position:fixed; 
    z-index:100;
    font-family:arial, sans-serif;
}
* html .menu {
    z-index:100;
}
.menu ul {
    padding:0;
    margin:0;
    list-style-type:none;
    z-index:90;
}
.menu ul ul {
    visibility:hidden;
    position:realtive;
    height:0;
    top:30px;
    left:0; 
    width:140px;
    border-top:1px solid #000;
    z-index:120;
}
* html .menu ul ul {
    top:30px;
    t\op:30px;
    z-index:120;
    postion:relative;
}
.menu table {
    top:0; 
    left:0; 
    border-collapse:collapse;
    z-index:120;
    postion:relative;
}
.menu li {
    float:left;
    width:auto;
    position:relative;
    z-index:100;
}
.menu a, .menu a:visited {
    display:block;
    font-size:12px;
    text-decoration:none; 
    color:#fff; 
    width:auto; 
    height:30px; 
    border:1px solid #000; 
    border-width:1px 0px 1px 1px;
    background:#09c; 
    padding-left:10px; 
    line-height:29px; 
    font-weight:bold;
}
* html .menu a, * html .menu a:visited {
    width:120px; 
    w\idth:120px;
}

.menu ul ul a.drop, .menu ul ul a.drop:visited {
    background:#AD0101;
    z-index:100;
}
.menu ul ul a.drop:hover{
    background:#AD0101;
    z-index:100;
}
.menu ul ul a, .menu ul ul a:visited {
    background:#AD0101; 
    color:#fff; 
    height:auto; 
    line-height:1em; 
    padding:5px 10px; 
    width:140px;
    border-width:0 1px 1px 1px;
    z-index:100;
}
* html .menu ul ul a, * html .menu ul ul a:visited {
    width:140px;
    w\idth:140px;
    z-index:100;
}
.menu ul li:hover ul,
.menu ul a:hover ul{
    visibility:visible;
}

そして、これは私が使用するHTML 構文です。

<div class="menu">
    <ul>
        <li><a class="hide mittel" href="#">MenuItem1
            <!--[if IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]>
            <table><tr><td>
            <![endif]-->
            <ul>
                <li><a href="#">Sub1</a></li>
                <li><a href="#">Sub2</a></li>
            </ul>
            <!--[if lte IE 6]>
            </td></tr></table>
            </a>
            <![endif]-->
        </li>
        <li><a class="hide mittel" href="#">MenuItem2
        <!--[if IE 7]><!--></a><!--<![endif]-->
        <!-- more menu-items ... -->
    </ul>
</div>

IE 6-7 でこれをテストすると、次のような問題が発生します。

スクリーンショットからわかるように: ウィンドウのサイズを変更すると、メイン メニューは 2 行になりますが、見栄えはよく、レイアウトの問題はまったくありません。サブメニューを持つ最初の行のアイテムにカーソルを合わせると、サブメニューアイテムはメインメニューと重なりません...ご覧のとおり、z-indexを試しましたが、何も変わらないか、私はそれを間違っていました。では、Javascriptを使用せずにウィンドウのサイズを変更したときに、サブメニューをメインメニューに重ねるにはどうすればよいですか? 事前にt​​hnx！

4

1 に答える 1

0

1) .menu ul ul {position:relative;} 現実的ではありません。

2) それでも問題が解決しない場合は、サブメニューの位置を絶対にします。IE6 と IE7 は、他の定義された z-index よりも優れた絶対配置を持つオブジェクトの z-index を尊重します。

于 2009-09-07T12:43:38.463 に答える