Имеется bootstrap меню
<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>
Нужно было сделать что бы меню выпадало при наведении, а в мобильной версии все как и должно - по клику.
Написал такой скрипт:
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')
})
};
Все работает, но вот в чем проблема, когда я уменьшаю размер экрана до мобильного, при наведении на дроп меню оно появляется, а должно уже выпадать только по клику, но как только я обновлю страницу (сразу мобильная версия), то все работает, увеличиваю размер браузера до десктопа, тоже все работает (выпадает по наведению), опять уменьшаю до мобильной версии опять выпадает не по клику, а по наведению.
resize тоже использовал, не помогает
В общем подскажите как решить проблему, или дайте ссылку на статью где правильно описано как сделать меню с ховером
