0

ホバー時にサブメニュー ドロップダウンをメイン ナビゲーション バーの下にプッシュするために使用top: 100%していますが、Firefox ではメニューがメニューの境界線の下にプッシュされ、1 ピクセルのギャップが生じます。Webkit ブラウザーでは、私が望んでいた方法で動作し、その間に隙間なくサブメニューが表示されます。値のハードコーディングを避けるために 100% を使用しています。

テスト用のコードペンを作成しました。問題を見やすくするために、メニューの周囲の境界線を赤に設定しました。2 番目のナビゲーションは、ホバー状態を示しているだけです。

アップデート

要素がなければdisplay: table;、.nav-main1px のギャップはなくなりますが、私はそれを使用しているのでdisplay: table-cell;、ナビゲーション リストの項目に追加してそれらを広げ、ナビゲーション全体を埋めることができます。それを回避する方法についてのアイデアはありますか？

html

<nav role="navigation">
    <ul class="nav-main">
        <li><a href="#">Link One</a></li>
        <li>
            <a href="#">Link Two</a>
            <ul class="sub-menu">
                <li><a href="#">Dropdown Link One</a></li>
                <li><a href="#">Dropdown Link Two</a></li>
                <li><a href="#">Dropdown Link Three</a></li>
            </ul>
        </li>
        <li><a href="#">Link Three</a></li>
        <li><a href="#">Link Four</a></li>
    </ul>
</nav>

scss

$pink: #ed2490;

a {
    text-decoration: none;
}

.nav-main {
    position: relative;
    display: table;
    margin: 0;
    padding: 0;
    width: 100%;
    border: 1px solid lighten(black, 22%);
    border-radius: 4px;
    background: lighten(black, 8%);
    @include background(linear-gradient(bottom, lighten(black, 8%), lighten(black, 36%)));
    font-weight: 500;
    line-height: 1;

    > li {
        display: table-cell;
        text-align: center;
        position: relative;

        &:hover {
            .sub-menu {
                top: 100%;
            }

            a {
                background: lighten(black, 18%);
                background: rgba(black, 0.25);
            }
        }
    }

    a {
        display: block;
        color: white;
        padding: 15px 10px;

        &:hover,
        &:focus {
            background: lighten(black, 18%);
            background: rgba(black, 0.25);
        }
    }

    .sub-menu { // dropdown
        position: absolute;
        top: -999px;
        z-index: 10;
        margin: 0;
        padding: 0;
        width: 200px;
        background: lighten(black, 4%);

        li {
            border-top: 1px solid lighten(black, 18%);

            &:first-child {
                border-top: 0;
            }
        }

        a:hover {
            background: $pink;
        }
    }
}

// For example only
.styleguide-dropdown {
    padding: 40px 20px 130px;
}

.nav-main {
    border-color: red;

    .psuedo-hover {
        a {
            background: lighten(black, 18%);
            background: rgba(black, 0.25);
        }

        .sub-menu {
            top: 100%;

            .psuedo-hover {
                background: $pink;
            }
        }
    }
}
4

2 に答える 2

1

震え、ディスプレイ付きのもの：table- *は本質的に、ブラウザ間で一貫してスタイルを設定するのが非常に困難になります。

しかし、そうは言っても、それは本当にあなたの問題ではありません。次の修正は両方とも機能します。

.submenu { display:none;}
:hover > .submenu { display: block;}

また

.submenu { height: 0; overflow:hidden }
:hover > .submenu { height: auto; }

そして、それらのどちらも、トップのクレイジーなシフトよりも、リフロー/リペイント/リレンダリングに適しているはずです。また、ネガティブトップで送信することで物事を「隠す」ことなく、ページの下のナビゲーションを再利用したい場合に備えて、より堅牢になります。

乾杯。

于 2013-03-08T21:37:37.603 に答える
0

周囲の 1px 境界線を削除ulすると、問題が解決します。次に、それぞれに上下の境界線を追加できますli。ただし、border-radius同じ方法では計算されません。

その理由は、この 2 ピクセルの境界線でulの高さが の高さよりも大きいため、 の高さの100%では十分ではないためだと思いますが、これについてはよくわかりません。lili

これが実際のデモです: http://codepen.io/anon/pen/jsBEt

于 2013-03-08T20:09:00.850 に答える