0

ドロップダウン メニュー (サブメニュー) でテキストの重なりを止めることができません。以下は私のHTML + CSSです。

<ul class="top-menu">
    <li><a href="index.html" >Events </a></li>
    <li>
        <a href="index-1.html">Store</a>
        <ul>
            <li><a href="index-2.html" >Imagination CD</a></li>
            <li><a href="index-2.html" >Total Relax</a></li>
            <li><a href="index-2.html" >Super Study</a></li>
        </ul>    
    </li>   
    </li>
    <li><a href="index-2.html" class="active">About Us</a></li>
    <li><a href="index-3.html">Contact</a></li>
</ul>

.top-menu {
    position: absolute;
    padding: 32px 00 0 10px;
    height: 85px;
}
.top-menu li{
    padding:0 24px 0 0;
}
.top-menu li, .top-menu li a{
    display:block;
    float:left;
}
.top-menu ul, .top-menu ul a{
    position: absolute;
    display: none;
    z-index:999px;
    line-height: 30px;
    top: 12px;
}
.top-menu li a{
    padding:0 0 0 30px;
    color:#4d3925;
    font-size:25px;
    line-height:26px;
    text-decoration:none;
}
.top-menu a:hover, .top-menu .active {
    color:#f29869;
}
.top-menu li:hover ul a,  .top-menu li:hover ul {
    position: abolute;
    display: block;
    padding: 32px 0 0 14px;
    font-size: 16px;
    line-height: 30px;
    z-index: 999px;
}

参考メニュー：http ://www.nicoheins.com/lux/

4

1 に答える 1

0

このドロップダウンには多くの問題があります。ただし、この特定の問題を引き起こしているのはposition:absolute;、セレクターの属性です.top-menu ul, .top-menu ul a。それを取り除くと、リンクは互いに重ならなくなります。

ただし、メニューを新鮮に見せるには、さらに多くの作業を行う必要があります。

私自身の作業をプラグインするわけではありませんが、Github でホストされている使用できるかなりまともなドロップダウン (少なくとも私は思う) を持っています。ここでチェックしてください。フェードや矢印が必要ない場合は、それらを削除してから、独自のスタイルを適用できます。残りは思い通りに動作するはずです。

その他の問題を修正するための編集:

繰り返しますが、元の質問は、このドロップダウンで指摘した問題の 1 つを解決することを求めているだけです。もう 1 つは、サブメニューが親を右にul押しているという事実です。liこのスタイリングを適用することでこれを修正できます。

.top-menu > li {
    position: relative;
}
.top-menu li ul {
    position: absolute;
}

もう 1 つは、すべてのliスタイルがfloat:left;. liこの方法でスタイルを設定するのは、トップ レベルの のみです。これは、このセクションによってケース化されます。

.top-menu li, .top-menu li a{
    display:block;
    float:left;
}

これを

.top-menu > li, .top-menu > li > a{
    display:block;
    float:left;
}

display:block;これは修正されますが、サブメニューasに再度適用する必要があります。

次の懸念は、サブメニュー間の大きな間隔に関するものだと思いますa。これは、次のコードでそれらをターゲットにしているためです。

.top-menu li:hover ul a,  .top-menu li:hover ul {
    position: abolute;
    display: block;
    padding: 32px 0 0 14px;
    font-size: 16px;
    z-index: 999px;
}

それpadding-topはかなり大きいです！セレクターが必要なものだけを選択していることを確認してください。そうしないと、このような奇妙な動作が発生します。これは、ドロップダウンのようにlis の中にlis があり、互いにまったく異なるスタイルにする必要がある場合に特に重要です。

セレクターの概要については、このページをご覧ください。

これの機能バージョンはこちらです。オリジナルをできるだけ変更しないように努めたことに注意してくださいcss。これにより、私が書くことができると思う最高のドロップダウンを書く能力が制限されていると思います. しかし、これはうまくいきます！

完全かつクリーンに動作するコードを書き直した JSFiddleを次に示します。

于 2012-10-11T03:48:29.277 に答える