Javascript-форум - Не пойму почему не срабатывает hover() по mouseout

При попадании курсора в div.item должен slideToggle() его дочерний div.hovered(таким образом, что этот всплывший div располагается полностью поверх родительского div), а когда курсор из div.item выходит, должно произойти обратное:

$('div.item').hover(function () {
		$(this).find('div.hovered').slideToggle('fast');});

<div class="item">
			
				<div class="hovered">
				
					content
				
				</div>
			
				content	
			
			</div>

Код:

div#suppliers .item {

        float: left;

        width: 70px;

        height: 52px;        

        padding: 12px;                

        font-size: 9px;

        position: relative;

}



div#suppliers .hovered {

        width: 200px;

        height: 50px;        

        padding: 12px;        

        margin: -12px 0 0 -12px;

        border: 1px solid #eaeceb;

        position: absolute;

        display: none;

        z-index: 9995;

        background: #fff;

}

Но фактически происходит только первая половина желаемого, т.е. когда я убираю курсор с этим слоём, .hovered не сворачивается. А сворачивается, когда ещё раз курсор навожу.

P.S. Как-то можно просто сделать так, чтобы slideToggle происходил не в вертикальной, а в горизонтальной плоскости, или надо подключать jquery interface?