2

私はこのHTMLコードを持っています：

<nav id="menu">
    <ul>
        <li>
            <a href="#">Item1</a>
            <a href="#" class="alt">Item1</a>
        </li>
        <li>
            <a href="#">Item2</a>
            <a href="#" class="alt">Item2</a>
        </li>
    </ul>
</nav>

デモページ

お気づきのように、アイテムごとに2つのリンクがあるメニューです。メニューは横向きで、アイテムがホバーされていないときは「alt」リンクを非表示にし、ホバーされているときは表示することを目的としています。

したがって、各<li>要素は特定の高さ（34px）のボックスであり、各リンクの高さも34pxであるため、「alt」リンクはメインリンクの下にあり、非表示になっています。

アイテムにカーソルを合わせると、34pxの負の上部マージンがメインリンクに適用され、「alt」リンクが表示されます。

しかし、「ホバリング」すると、私が作成したデモページでわかるように、上マージン0は実際にはGoogleChromeによって適用されません。リンクに数回カーソルを合わせると、要素が正しい位置に戻されないことがわかります。

どうすればそれを解決できますか？より複雑な理由で、2つのリンク（メインと「alt」）を保持する必要があります。デモは簡略化されています。

参考までに、CSSは次のとおりです。

nav#menu {
    background-color: #e9e9e9;
}

nav#menu > ul {
    margin: 0;
    height: 39px;
    display: block;
    list-style-type: none;
}

nav#menu > ul > li {
    display: inline-block;
    height: 34px;
    overflow: hidden;
    width: 200px;
}

nav#menu > ul > li > a {
    display: block;
    height: 34px;
    line-height: 34px;
}

nav#menu > ul > li > a:first-child {
    margin-top: 0;
}

nav#menu > ul > li:hover > a:first-child {
    margin-top: -34px;
}

nav#menu > ul > li > a.alt {
    color: white;
    background-color: #8d8d8d;
}
4

1 に答える 1

1

すべてのコメントをお詫び申し上げます。私はそれを機能させようとしていて、ただ大声で考えていました。これがあなたが探している解決策です...

2つのスタイルを変更する必要があります。

/* add the overflow: hidden; to the end of this tag set */
nav#menu > ul {  .... overflow: hidden;  }  

/* replace the inline-block with float:left;*/
nav#menu > ul > li { float:left; height: 34px; overflow: hidden; width: 200px; }

これが作業リンクjsFiddleです

于 2012-09-24T17:25:17.077 に答える