[simpl1k]

Здравствуйте. Есть данное меню, проблема заключается в том, что если вывести курсор за область выпадающего меню и быстро вернуть обратно в эту область (не на элемент li.dropdown), то оно опять появляется, иногда бывает что оно вообще не исчезает и приходится повторно проводить курсором. Объяснение так себе, поэтому для наглядности прикладываю гифку и ссылку на песочницу с самим меню. Будьте добры подскажите в чем может быть проблема. Спасибо

http://www.picshare.ru/view/7106951/
https://jsfiddle.net/6JbtX/1380/

<ul class="menu">
    <li class="dropdown">
        <a href="#" class="toplevel">menu</a>
        <ul class="submenu">
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
        </ul>
    </li>
    <li class="dropdown">
        <a href="#" class="toplevel">menu2</a>
        <ul class="submenu">
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4t</a></li>
        </ul>
    </li>
</ul>

$(function()
{
    var $dropdowns = $('li.dropdown');
    $dropdowns
        .on('mouseover', function() 
        {
            var $this = $(this);

            if ($this.prop('hoverTimeout'))
            {
                $this.prop('hoverTimeout', clearTimeout($this.prop('hoverTimeout')));
            }

            $this.prop('hoverIntent', setTimeout(function()
            {
                $this.addClass('hover');
            }, 250));
        })
        .on('mouseleave', function()
        {
            var $this = $(this);

            if ($this.prop('hoverIntent'))
            {
                $this.prop('hoverIntent', clearTimeout($this.prop('hoverIntent')));
            }

            $this.prop('hoverTimeout', setTimeout(function()
            {
                $this.removeClass('hover');
            }, 50));
        });   
});