Сохранение выпадающего меню при наведении и scrollspy

У меня есть navbar на моем веб-сайте, в котором я использую Bootstrap scrollSpy для отслеживания раздела, который я просматриваю. Теперь я решил добавить раскрывающееся меню в мой navbar и добавил один, который запускается на hover вместо клика.

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

Кроме того, поскольку триггер зависания отключен в режиме responsive, нажатие на элемент li также не открывает раскрывающееся меню.

Теперь наличие scrollSpy в режиме реагирования не требуется, так как меню все равно будет свернуто.

Это мой раздел навигации:

<nav class="navbar navbar-default navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="">
                        <!-- <img class="img img-responsive" src="www/images/srs-logo.jpg" alt="SRS Constructions"> -->
                        SRS Constructions
                    </a>
                </div>
                <div class="collapse navbar-collapse navbar-right" id="collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#main">Home <span class="sr-only">(current)</span></a></li>
                        <li><a href="#about">About</a></li>
                        <li class="dropdown">
                            <a href="#about" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About</a>
                            <ul class="dropdown-menu">
                                <li><a href="about.html">Founder</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">One more separated link</a></li>
                            </ul>
                        </li>
                        <li><a href="#services">Services</a></li>
                        <li><a href="#projects">Our Projects</a></li>
                        <li><a href="#whyus">Why Us</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div>
            </div>
        </nav>

Это мой css для моего навигатора:

@media (min-width: 767px) {
    ul.nav li.dropdown:hover > ul.dropdown-menu {
        display: block;
    }
}

@media (max-width: 767px) {
    .navbar-nav > li > a {
        line-height: 30px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-brand > img {
        width: 40%;
        position: relative;
        display: inline-block;
        height: auto;
        margin-left: 90px;
        margin-top: -80px;
    }
    #footer {
        color: #2e2e2e;
    }
}

@media (min-width: 767px) {
    #footer {
        color: #ffffff;
    }
}

.navbar-brand > img {
    width: 30%;
    position: relative;
    display: inline-block;
    height: auto;
    margin-left: 50px;
    margin-top: -15px;
}

В раскрывающемся меню li находится href элемент, который вызывает проблему. Я хочу поддерживать как scrollspy, так и при наведении на обычную ширину экрана и только наведение (которое будет кликать), а не scrollspy в режиме реагирования (я не против, если он также работает).

Скажите, пожалуйста, как я могу добиться этого, поскольку оба кажутся противоречивыми друг другу при реализации.

EDIT:

О li - это тот, который я использую для проверки элемента scrollspy и hover:

<li><a href="#about">About</a></li>
                            <li class="dropdown">
                                <a href="#about" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About</a>
                                <ul class="dropdown-menu">
                                    <li><a href="about.html">Founder</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="#">Separated link</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="#">One more separated link</a></li>
                                </ul>
                            </li>
  • Нажав на первую о работах → он перейдет к раздел.
  • Щелчок по второму о не слова → прокрутка шпиона не работает, но наведение работает.

Я хочу объединить обе функции вместе.

Веб-сайт можно просмотреть здесь (без изменений на лету)

ОТВЕТЫ