Некорректно работает transition-duration

[Yan]

Добрый день! Я уже замучился, не пойму в чем проблема. Делаю так, чтобы при наведении на главный пункт меню, сверху плавно выезжали подпункты. Вот код:
HTML

<div class="menu goods">     <a href="#">All goods</a>     <ul class="submenu">          <li>first</li>          <li>second</li>          <li>third</li>     </ul></div>

CSS

.goods:hover .submenu{        transform: translateY(0px);}.submenu{        margin: 0;        padding: 0;        list-style: none;        transform: translateY(-300px);        transition-duration: 1s;        transition-property: transform;}

Это работает, но проблема в следующем:
Когда я подвожу мышку к границе главного пункта меню (т.е. к .goods), то часто блок с подменю не плавно выезжает, а резко вываливается и так же пропадает. Кто подскажет почему так? Спасибо!