0

私のメニューで奇妙なことが起こっています

1 つのスクリーン キャップ 1 は正常に動作していることを示しています 2. スクリーン キャップ 2 つは問題があることを示しています

ここに画像の説明を入力

ここに画像の説明を入力

ここにコードがあります

#navigation { margin-top: -17px; }
.region-nav-main .content {background:#6f0d1c; height:28px; color:#fff; width:auto; float:right; font:11px 'Trebuchet MS', Arial, Helvetica, sans-serif;}
.region-nav-main .content ul li {float:left; list-style:none; display:inline; position:relative; z-index:997; padding:0; margin:0;}
.region-nav-main .content ul li a {color:#fff; text-decoration:none; padding:0 10px; display:block; line-height:28px;}
.region-nav-main .content ul li a:hover {background:#242121;}


.region-nav-main .content  ul li.expanded a {background:url(../images/parent-dd.gif) right 12px no-repeat; padding:0 22px 0 10px;}
.region-nav-main .content  ul li a.parent:hover, .region-nav-main .content ul li.hover a, .region-nav-main .content ul li.hover a:hover, .region-nav-main .content  ul li.expanded a.active {background:#242121 url(../images/parent-dd.gif) right -82px no-repeat;}
.region-nav-main .content  ul li a.active {background:#242121}
.region-nav-main .content  ul li.expanded a.active-trail {background: #242121 url(../images/parent-dd.gif) right -82px no-repeat;}
.region-nav-main .content  ul li.expanded li a {background:none;}
.region-nav-main .content ul li.hover li a:hover {background:#3a3a3a none;}

.region-nav-main .content ul li ul {display:none; position:absolute; top:28px; left:0; z-index:998;}
.region-nav-main .content ul li ul li {background:#242121; border-bottom:1px solid #383535; display:block; float:none; color:#868686; float:left; clear:both;z-index:998;}
.region-nav-main .content ul li ul li.last {border:0 none;z-index:991;}



.region-nav-main .content ul li ul li:hover ul{ display:block;}
.region-nav-main .content ul li ul li a {color:#868686; background:none; width:135px;}
.region-nav-main .content ul li ul li a:hover {background:#3a3a3a; color:#fff;}

.region-nav-main .content ul li ul li ul{left:144px; top:-2px; display:none;}

私は運がないので次のことを試しました 

.region-nav-main .content ul li{z-index:990 !important;}

.region-nav-main .content ul li ul {z-index:995 !important;}
.region-nav-main .content ul li ul li {z-index:995 !important;}

.region-nav-main .content ul li ul li ul {z-index:999 !important;}
.region-nav-main .content ul li ul li ul li {z-index:999 !important;}
4

4 に答える 4

0

EmCoが言ったように、それはz-indexの問題のようです。ネストされたliが正常に表示されているように見えます。z-indexは998で、li.lastのz-indexは991です。おそらくli.lastを変更してz-indexを998にすると修正されます。

于 2013-02-28T16:51:20.170 に答える
0

OK誰かが興味を持っているなら、私は解決策を見つけました

これらは私のメニューに設定されている唯一のz-indexです

.region-nav-main .content ul li ul {z-index:985 !important;}
.region-nav-main .content ul li ul li ul {z-index:977 !important;}

なぜこれが機能するのか完全に困惑していますが、サファリ、オペラ、クローム、IEでは機能します

于 2013-02-28T18:00:00.723 に答える
0

li.lastは、そのレベルのliの以前のスタイルから継承するため、独自のz-index値は必要ありません。li.lastスタイルからz-indexを完全に削除するだけで、機能するはずです。

于 2013-03-01T17:19:44.550 に答える
0

あなたのz-indexat.region-nav-main .content ul li ul li.lastはあなたの親よりも低い.region-nav-main .content ul liため、スタック順序のために非表示になります。z-indexに高い値を設定する必要があります.region-nav-main .content ul li ul li.last。

于 2013-02-28T16:46:43.750 に答える