0

Wordpress TwentyTwelve テーマのデフォルト メニューを編集しようとしています。これまでのところ、サブメニューを水平にしましたが、Firefox では Chrome と同じように配置されていません。Ff では思い通りに見えますが、Chrome では、サブメニューはメインメニューの左端ではなく、以前にクリックしたメニュー項目に揃えられます。基本的に、横 2 行のメニューが必要です。"position:"" を正しく取得できません。両方のブラウザーでどのように表示されるかを次に示します。

両方のブラウザーでの表示は次のとおりです。 Chrome: http://imageshack.us/photo/my-images/248/cssmenuchrome.jpg/

評判が 10 必要なので、これ以上リンクを投稿することはできませんが、2 番目の画像 (Firefox のメニュー) もそこに含まれています。

これまでのところ、私のコードのフィドルは次のとおりです。 http://jsfiddle.net/ZN9my/

.main-navigation li ul ul {
        top: 0;
        left: 100%;
    }
  .main-navigation .menu-item li {
        display: none;
        margin-right: 14px !important;
    }
4

1 に答える 1

0

position:absolute;あなたの問題は、あなたが言うように、両方のブラウザがあなたを異なっ て扱っているように見えるということです. position:absoluteは、明示的に設定された最新の親要素に関して計算する必要がありますposition。これは、実際にそれを正しく解釈しているのは Chrome であることを意味します。

この場合、 を指定しまし.main-navigation liたposition:relative。これは、Chrome がサブメニュー をli.sub-menu相対的に配置していることを意味します。position-relativeをCSS から削除して.main-navigation liに追加するとul#menu-main、li.sub-menuはメイン ナビゲーション ul に対して相対的に配置され、ブラウザ間で希望どおりに動作するはずです。おそらく、 を から のようなものに変更して、適切な場所に配置することをお勧め.main-navigation li ulします。top100%37px

jsfiddle にも変更を加えました: http://jsfiddle.net/ZN9my/1/。

于 2013-03-08T10:29:22.430 に答える