Навигация по выпадающему меню - наведите и нажмите

У меня есть nav, при опрокидывании появляется надводный навигатор.

Это также должно работать на мобильных устройствах, поэтому я думаю, что лучший способ добиться этого - использовать jquery при щелчке. Таким образом, он будет отображаться при наведении курсора на рабочий стол и на клик - на мобильном устройстве.

Я реализовал это решение, но проблема в том, что когда пользователь наводит курсор на навигатор, затем нажимает на него, навигатор остается включенным даже при отклонении.

Какое лучшее решение для этого?

Я использую bootstrap 2.

HTML

<ul>
<li class="n1">Nav 1</li>
<li class="n2">Nav 2</li>
<li class="n3">Nav 3
    <ul class="dropdown">
        <li>DropDown 1</li>
        <li>DropDown 2</li>
        <li>DropDown 3</li>
    </ul>
</li>

МЕНЬШЕ

ul{
    li{
        &:last-child{

                &:hover {
                    border-bottom-color: white;
                    .nav-dropdown{
                        display: block;
                    }
                }
            }
      }
 }

JS

$('.dropdown').parent().on('click', function(){
        $('dropdown').toggle();
    });