1

我做了一个下拉菜单，它工作得很好，但是当项目向上滑动时，它会留下一些水平线，就像一个痕迹......有没有办法摆脱它？谢谢！这是我的代码：

HTML： 

        <!-- Biscoitos -->
            <li><aside id="biscoitos" onClick="Slider(this.id)">Biscoitos</aside>
                <ul>
                    <li><aside id="bisc-festas" onClick="Slider(this.id)">&#160&#160&#160Festas</aside></li>
                    <li><aside id="bisc-mater" onClick="Slider(this.id)">&#160&#160&#160Maternidade</aside></li>
                </ul>
            </li>
        <!-- Chocolates -->
            <li><aside id="chocolates" onClick="Slider(this.id)">Chocolates</aside>
                <ul>
                    <li><aside id="choc-pascoa" onClick="Slider(this.id)">&#160&#160&#160Páscoa</aside></li>
                    <li><aside id="choc-namo" onClick="Slider(this.id)">&#160&#160&#160Dia dos Namorados</aside></li>
                    <li><aside id="choc-natal" onClick="Slider(this.id)">&#160&#160&#160Natal</aside></li>
                </ul>
            </li>
        <!-- Bolos -->
            <li><aside id="bolos" onClick="Slider(this.id)">Bolos</aside>
                <ul>
                    <li><aside id="bolo-aniver" onClick="Slider(this.id)">&#160&#160&#160Aniversário</aside></li>
                </ul>
            </li>
        <!-- Trufas -->
            <li><aside id="trufas" onClick="Slider(this.id)">Trufas</aside>
                <ul>
                    <li><aside id="trufa-aniver" onClick="Slider(this.id)">&#160&#160&#160Aniversário</aside>
                    </li>
                </ul>
            </li>
    </ul>

CSS

#drop
{
    list-style:none;
    margin:5px 200px;
    padding:0px;
    cursor: pointer;
}
#drop li:hover
{
    background:url("/img/menu7.png");
    background-position:center;
    background-size:180px 30px;  
}

#drop li
{
    float:left;
    display:block;
    position:relative;
    width:180px;
    /*background-color:#888a85;*/
    background:url("/img/menu8.png");
    background-position:center;
    background-size:180px 30px;
    margin:0px 1px;
    font-size:14px;
    font-style:oblique;
    font-weight:bold;
    color:white;
    padding:6px;

}
#drop li ul 
{
    display:none;
    list-style:none;
    width:180px;
    text-align:left;
    font-size:14px;
    font-style:oblique;
    font-weight:bold;
    color:white;
    margin:1px 0px 1px -6px;
    position:absolute;
    z-index:1; 
    padding:6px;
}
#drop ul li
{
    float:left;
    width:180px;
    padding:6px;
    margin:1px 0px 1px -6px;
}

JS

// Drop Down Menu
    $(document).ready( function()
    {
        $("#drop li").hover( 
        function()
        {
            $("ul", this).stop(true, true).slideDown(800);
        },
        function()
        {
            $("ul", this).stop(true, true).slideUp(800);
        });

    });

对不起，缺乏信息..非常感谢！

4

1 回答 1

0

这显然是 Chrome 中的一个错误，我一直在努力尝试为我正在做的网站解决它。

似乎后退 div 上的最后一个（底部）1 像素宽的条带有时不会重新绘制（并不总是相同的位置或错过的重新绘制次数） - 所以我的解决方法是给滑动 div 1px 实心边框与背景颜色相同 - 所以当它离开线条时，它几乎不会被注意到。

希望有所帮助 - 它不是一个解决方案，但我很确定从我所做的研究中可以确定 slideUp/slideDown 代码很好，它是一个浏览器错误......所以这可能与修复它一样接近你会直到 Chrome 修复。

于 2013-05-24T14:32:01.903 回答