0

サブメニュー付きのこのシンプルなドロップダウンメニューがあります。問題は、メニュー項目をホバーしてサブメニューを表示すると (slideDown を使用)、アニメーション/エフェクトの実行中にメニューの一部しか表示されないことです (オーバーフローの問題) - アニメーションが完了すると、メニュー全体が表示されます

私のフィドルを見て、私が何を意味するかを確認してください。

HTML:

<ul id="main">
    <li><a>Item1</a>
        <ul class="sub">
            <li>subItem1</li>
            <li>subItem2</li>
            <li>subItem3</li>
        </ul>
    </li>
    <li><a>Item2</a>
        <ul class="sub">
            <li>subItem4</li>
            <li>subItem5</li>
            <li>subItem6</li>
        </ul>    
    </li>
    <li><a>Item3</a></li>
    <li><a>Item4</a></li>
</ul>

CSS:

ul{
    list-style: none;
    position: relative;
    z-index: 99;
}
ul#main li{
    float: left;
    position: relative;
    width: 50px;
    overflow: visible;
}
ul#main li a{
    display: block;
    padding: 0px 10px 10px 10px;
}
ul.sub{
    position: relative; 
    top: 100%; 
    right: 30%;
    display: none;
    z-index: 999;
}

ul.sub li{
    float: none;    
}

JS:

$('ul#main li').mouseenter(function(){
    $(this).children('ul.sub').slideDown(300);
});
$('ul#main li').mouseleave(function(){
    $(this).children('ul.sub').slideUp(300);
});
4

2 に答える 2

1

ul.subこのフィドルを表示するには幅を追加するだけです - http://jsfiddle.net/im4aLL/GM9Lm/46/

于 2013-05-28T10:10:24.853 に答える
0

に幅を追加しますul.sub:

ul.sub{
    position: relative; 
    top: 100%; 
    right: 30%;
    display: none;
    z-index: 999;
    width: 50px;
}

フローティング アイテムの問題を修正するには、以下も追加します。

ul.sub li{
    clear: both;
}
于 2013-05-28T10:14:19.893 に答える