0

このメニュー（http://thepiratehenk.nl/pgwe/）の問題は、サブメニューを右に移動すると表示されなくなることです。

（Internet Explorerでも機能しません。これは、次に修正する問題です。）

4

2 に答える 2

4

次のCSSルールを追加します。

.navi nav > ul > li:hover {
    z-index: 2;
}

これにより、現在のメニュー項目とそのサブメニューが常に他のメニュー項目の上に表示されます。

2つの主要な問題

  1. 他のメニュー項目と重複するメニュー項目
  2. 前のメニュー項目のサブメニューと重複するメニュー項目

第1号

問題＃1は、にがあり、その中のタグに回転を実行することによって発生し:hoverます（同じ要素にとの回転がないli）。これは、次の2つの方法のいずれかで対処できます。a:hover

1a。現在のメニュー項目（マウスが上にある）に、他のどのメニュー項目よりも大きなz-index値を一時的に与えます。これは、を使用してCSSのみで実行できる場合がありますli:hover。

1b。liタグではなくメニューを回転してから、その中aのサブメニューulタグの回転を解除します（:hoverと回転が同じ要素上にあるようにします）。

第2号

各メニュー項目の下隅は、前のメニュー項目のサブメニューの上にあります。サブメニューは常にすべてのメニュー項目の上にある必要があります。

上記の1aソリューションは、問題＃2も修正する可能性があります（メニューのz-indexをでli大きく設定z-indexし:hoverます。

マイナーな問題

上記のコメントと@blackhawkで言及されている別の問題は、タグ.naarlinks div内に直接ネストされていることです。ulこれは実際には上記の問題とは無関係であるように見えますが、それでもそのままにしておくのは安全ではありません。一部のブラウザで奇妙な動作を引き起こすリスクは別として、HTMLの検証も妨げられます。

はしか.naarlinks div持っていないようpadding-left: 100px;です。が不適切にネストされているため、そのスタイルが有効になっているかどうかはわかりませんが、そのスタイルが必要な場合は、何らかの方法でdivサブメニューに追加してみてください。ul

まず、.naarlinks divsを削除して、それがページにどのように影響するかを確認することをお勧めします。ul次に、サブメニュータグにスタイルを追加して修正する必要があるかどうかを確認します。

を削除した後div、サブメニューのパディングをul次のように変更してみてください。

.navi nav li ul {
    padding: 3px 10px 3px 110px;
}
于 2013-03-09T20:46:18.857 に答える
1

順序付けされていないリスト内の最初の子としてdiv要素を持つことはできません。それがあなたのページが壊れている理由です。

順序付けされていないリストの基本構造は、通常、次のようになります...

<ul>
<li></li>
<li></li>
</ul>

このようではありません...

<ul>
<div>
<li></li>
<li></li>
</div>
</ul>

しかし、あなたの質問に答えるために-あなたはあなたのCSSに1つの小さなものが欠けています...

.navi nav li ul：hover {display：block}

于 2013-03-09T21:27:13.690 に答える