How to fix hover issue in bootstrap menu?

Question

css

There is a bootstrap menu

<ul class="nav navbar-nav navbar-right">
                  <li><a href="#">Главная</a><span>|</span></li> 
                  <li class="dropdown">
                    <a href="#" class="dropdown-toggle active" data-toggle="dropdown">Наши услуги</a><span>|</span>
                    <ul class="dropdown-menu dropdown-menu-left">
                      <li class="li-sub-dropdown">
                        <div class="trian"></div>
                        <a href="#">Создание адаптивных сайтов <span>>></span></a>
                        <ul class="sub-dropdown-menu">
                          <li><a href="#">Пункт1</a></li>
                          <li><a href="#">Пункт2</a></li>
                        </ul> 
                      </li>
                      <li><a href="#">Подпункт1</a></li>
                      <li><a href="#">Подпункт2</a></li>
                    </ul> 
                  </li> 
                  <li><a href="#">Портфолио</a><span>|</span></li>  
                  <li><a href="#">О нас</a><span>|</span></li> 
                  <li><a href="#">Блог</a><span>|</span></li> 
                  <li><a href="#">Контакты</a></li>
                </ul>

It was necessary to make the menu drop out on hover, but in the mobile version everything is as it should be - on click.

Wrote this script:

if($(window).width() > 767){
        $('.dropdown').hover(function(){
            $('.dropdown-menu').css('display','block')
        },
        function(){
             $('.dropdown-menu').css('display','none')
         }
        )
        $('.li-sub-dropdown').hover(function(){
            $('.sub-dropdown-menu').css('display','block')
        },
        function(){
            $('.sub-dropdown-menu').css('display','none')
        })
     };

Everything works, but here's the problem, when I reduce the screen size to mobile, when I hover over the drop menu it appears, but it should already drop out only on click, but as soon as I refresh the page (immediately the mobile version), then everything works, I increase the size of the browser to the desktop, everything also works (drops out on hover), again I reduce it to the mobile version, again it drops out not on click, but on hover.
resize also used, does not help

In general, tell me how to solve the problem, or give a link to an article where it is correctly described how to make a menu with a hover

Answer 1

The issue with browser resize is very subtle. You need to write your own handler. Here is a classic version suitable for any event. Here presented for resize

// отлавливает события resize
var handleResizeEvents = function() {
    var resizeLayout = debounce(_resizeEvents, 30);
    $(window).resize(resizeLayout);
}

// выполнятся через 30мс после resize 
var _resizeEvents = function() {
    // здесь функция ховера 
    if ($(window).width() > 767) {
        $('.dropdown').hover(function() {
                $('.dropdown-menu').css('display', 'block')
            },
            function() {
                $('.dropdown-menu').css('display', 'none')
            }
        )
        $('.li-sub-dropdown').hover(function() {
                $('.sub-dropdown-menu').css('display', 'block')
            },
            function() {
                $('.sub-dropdown-menu').css('display', 'none')
            })
    };
}

// Функционал следящий за событиями (взято из underscore.js)
// copyright undersore.js
var debounce = function(func, wait, immediate) {
    var timeout, args, context, timestamp, result;
    return function() {
        context = this;
        args = arguments;
        timestamp = new Date();
        var later = function() {
            var last = (new Date()) - timestamp;
            if (last < wait) {
                timeout = setTimeout(later, wait - last);
            } else {
                timeout = null;
                if (!immediate) result = func.apply(context, args);
            }
        };
        var callNow = immediate && !timeout;
        if (!timeout) {
            timeout = setTimeout(later, wait);
        }
        if (callNow) result = func.apply(context, args);
        return result;
    };
};

And here is a special plugin for this purpose.

Answer 2

Because your script is initialized at high resolutions at the start, do

$().on('hover', function(){
if($(window).width() > 767){}
})

And he will check normally. Off topic question - do you really need it? Do you think a lot of people will open your site at 767 resolution or less with a mouse in hand?