Question

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

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);
        });

    });

抱歉缺乏信息......非常感谢！

Answer 1

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

看起来后退div上的最后一个（底部）1像素宽的条带有时不会被重新绘制（并且不总是错过重新绘制的相同位置或数量） - 所以我的解决方法是给出滑动div一个1px实心边框与背景颜色相同 - 所以如果它离开线条的同时它的后退几乎没有显示。

希望有帮助 - 它不是一个解决方案，但我非常肯定从我所做的研究中，slideUp / slideDown代码很好，它是一个浏览器错误......所以这可能就像修复它一样正如您将要修复Chrome一样。

下拉菜单在向上滑动后在背景上留下线条

1 个答案: