Выпадающее меню оставляет линии на заднем плане после скольжения вверх

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

    }); 

К сожалению об отсутствии information..Many спасибо!

Answer 1

Это, видимо, ошибка в Chrome, я работал над тем, чтобы попытаться решить ее и для сайта, который я тоже делаю.

Похоже, что последняя (нижняя) полоса шириной 1 пиксель на отступающем div иногда не перерисовывается (и не всегда одно и то же место или количество пропущенных повторных розыгрышей) - поэтому моим обходным путем является предоставление скользящий div 1px сплошной границы того же цвета, что и фон, - так, если и когда он покидает линию, отступая от нее едва заметной.

Надеюсь, что это поможет - это не решение, но я уверен, что из исследования, которое я сделал, что код slideUp/slideDown в порядке, его ошибка браузера ... так что, вероятно, это близко к исправлению так как вы получите до тех пор, пока Chrome не будет исправлен.