2

いくつかのドロップダウン メニューを作成しました (親のリンクにカーソルを合わせると表示されます)。ドロップダウン メニューには単にリンクが含まれています。特にない。

Google Chrome (親の下) を使用している場合は問題なく動作しますが、Mozilla Firefox を使用している場合は常に画面の左端に表示されます。

なぜこれが起こっているのか、誰にも分かりますか？

グーグルクローム：

Google Chrome の動作

モジラ ファイアフォックス:

Mozilla Firefox が動作しない

ドロップダウン HTML 検査の例:

ドロップダウン HTML 検査の例

関連する CSS:

/* Sub menu styles */
#headermenu td.hasSubMenu ul {
    display: block;
    float: left;
    position: absolute;
    list-style: none;
    min-width: 200px;
    left: -999em;
    padding: 10px 10px;
    text-align: left;
    background-color: #89B0F1;
    z-index: 100;
    border-top-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    box-shadow: 0px 3px 10px 0px #000000;
}

#headermenu td.hasSubMenu li {
    padding: 10px 5px;
    color: #252B76;
}

#headermenu td.hasSubMenu:hover ul {
    left: 0px;
    top: auto;
}

#headermenu td.hasSubMenu li:hover {
    background-color: #252B76;
    color: #FFFFFF;
}

#headermenu td.hasSubMenu li:hover a {
    color: #FFFFFF;
}

あなたの助けに感謝します。:)

4

2 に答える 2

1

いくつかのことを微調整することで、これを自分で解決したようです。

ドロップダウン メニューをページから押し出して ( を使用してleft: -999em;) 非表示にする代わりに、現在使用しており、ホバーしたときにdisplay: none;使用しています。display: block;ただし、これは、ドロップダウンがその親の右に 10 ピクセル移動したことを意味します。これは正しく見えませんでした。これに対抗するために を使用してみleft: 0px;ましたが、Firefox がドロップダウンを左にレンダリングして再表示するという問題が発生しました。私は試しmargin-left: -10px;てみましたが、うまくいきました。

したがって、私が現在使用しているCSSは次のようになります。

/* Sub menu styles */
#headermenu td.hasSubMenu ul {
    display: none;
    position: absolute;
    list-style: none;
    min-width: 200px;
    padding: 10px 10px;
    margin-left: -10px;
    text-align: left;
    background-color: #89B0F1;
    z-index: 100;
    border-top-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    box-shadow: 0px 3px 10px 0px #000000;
}

#headermenu td.hasSubMenu li {
    padding: 10px 5px;
    color: #252B76;
}

#headermenu td.hasSubMenu:hover ul {
    display: block;
}

#headermenu td.hasSubMenu li:hover {
    background-color: #252B76;
    color: #FFFFFF;
}

#headermenu td.hasSubMenu li:hover a {
    color: #FFFFFF;
}
于 2013-06-11T11:50:57.507 に答える