0

私は今、1時間見つめている問題に頭を悩ませようとしています。私はこのページに取り組んでいますが、私の問題はメニューにあります。

特別な絶対配置リスト項目 (#magic-line) を 1 つ含むナビゲーション リストがあり、(jQuery を使用して) 他の項目をホバリングするときに背景を形成し、素敵な効果を与えます。問題は、ナビゲーション リスト項目の前に留まり続け、バグのある動作を引き起こすことです。

絶対位置のリスト項目に 100 の z-index を与えながら、ナビゲーション リスト項目とその中のアンカーに z-index 200 を与えてきました。私が知る限り、これは問題をすぐに解決するはずです。しかし、どうやらそうではありません。私はおそらく鈍い詳細を見落としています。皆さんがこれに新しい光を当てることができることを願っています.

HTML は次のようになります。

<nav>
    <ul class="group">
        <li class="current"><a href="/v3/" data-section="#start">Home</a></li>
        <li><a href="/v3/over-mij/" data-section="#over-mij">Over Mij</a></li>
        <li><a href="/v3/portfolio/" data-section="#portfolio">Portfolio</a></li>
        <li><a href="/v3/inspiraties/" data-section="#inspiraties">Inspiraties</a></li>
        <li><a href="/v3/contact/" data-section="#contact">Contact</a></li>
        <li id="magic-line" style="width: 63px; height: 48px; left: 0px; overflow: hidden;"></li>
    </ul>
</nav>

この HTML に影響を与える CSS 部分は次のとおりです。

nav{
    color: #edebe6;
    font-size: 1.2em;
}
nav ul{
    padding: 0;
    list-style: none;
    display: block;
    position: relative;
}
nav ul li{
    float: left;
    z-index: 200;
}
nav ul li a{
    color: #edebe6;
    text-decoration: none;
    display: block;
    float: left;
    padding: 10px;
    border: none;
    z-index: 200;
}
nav ul li a:hover{
    background-color: transparent;
}
nav #magic-line{
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    background-color: #d3643b;
    z-index: 100;
}
4

1 に答える 1

1

テスト後position: relative、メニュー項目を設定すると、期待どおりに動作します。

nav ul li a {
    border: medium none;
    color: #EDEBE6;
    display: block;
    float: left;
    padding: 10px;
    position: relative;
    text-decoration: none;
    z-index: 200;
}

これらのアイテムでは z オーダーは考慮されませんでした。

于 2012-11-28T14:13:01.380 に答える