0

私はここで見ることができるスライド ダウン メニューに取り組んでいます。と の両方ul#navigationに角を丸めましたul.subnavigation。サブメニューが下にスライドすると、「ちらつき」なしでスムーズに下にスライドしたいときにul.subnavigation、 のコンテンツと重なるの下部に境界線が表示される可能性があります。ul#navigationこの問題は丸みを帯びた角が原因であることを認識しています。メニューがドロップダウンしたときul.subnavigationの下部にある丸みを帯びた角をカバーする必要がありますが、二重の境界線の下の問題は表示されません。ul#navigationこれが明確であることを願っています！コードは以下です。

ありがとう、

ニック

HTML

<ul id="navigation">
    <li class="dropdown"><a href="#">menu</a>
        <ul class="sub_navigation">
            <li><a href="#">home</a></li>
            <li><a href="#">help</a></li>
            <li><a href="#">disable tips</a></li>
        </ul>
    </li>
</ul>

Jクエリ

$('.dropdown').hover(function() {
    $(this).find('.sub_navigation').slideToggle();
});​

CSS

ul#navigation, ul.sub_navigation {
    margin:0;
    padding:0;
    list-style-type:none;
    min-width:100px;
    background-color: white;
    font-size:15px;
    font-family: Trebuchet MS;
    text-align: center;
    -khtml-border-radius: 0 0 5px 5px;    
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
    border:1px black solid;
    border-top:none;
}

ul.sub_navigation {
    margin-left:-1px;
    position: absolute;
    top:28px;
}

ul#navigation {
    float:left;
    position:absolute;
    top:0;
}

ul#navigation li {
    float:left;
    min-width:100px;
}

ul.sub_navigation {
    position:absolute;
    display:none;
}

ul.sub_navigation li {
    clear:both;
}

 a,
 a:active,
 a:visited {
    display:block;
    padding:7px;
}
4

1 に答える 1

1

サブメニューを配置する理由 その位置を削除し、ホバーがトリガーされるまで非表示にします。

このフィドルを確認してください。

于 2012-06-11T10:36:39.830 に答える