Как предоставить ссылку на якорный тег верхнего уровня в навигации начальной загрузки (v4.1.1), имеющей подменю?

Question

Я хочу предоставить ссылку на тег привязки верхнего уровня в меню начальной загрузки.Я использую data-toggle="dropdown" для родительского тега привязки, чтобы открыть его подменю.но это отключит его href ссылку.Как я могу предоставить href верхнему тегу привязки и сохранить функциональность раскрывающегося меню?

Я много искал и нашел похожую проблему здесь , но я не хочуиспользовать jQuery, я также пробовал свойство data-hover="dropdown", но это не помогает.

Структура HTML:

<div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item dropdown menu-item-has-children show">
                        <a class="nav-link dropdown-toggle" href="about-us.html" target="_blank" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                            Company Overview
                        </a>
                        <div class="dropdown-menu dropdown-menu-right show" aria-labelledby="navbarDropdownBlog">
                            <a class="dropdown-item" href="vision-and-values.html">Vision and Values</a>
                            <a class="dropdown-item" href="ethics.html">Ethics</a>
                            <a class="dropdown-item" href="history.html">History</a>
                            <a class="dropdown-item" href="delivery-systems.html">Delivery Systems</a>
                        </div>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Capabilities
                        </a>
                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog1">
                            <a class="dropdown-item" href="infrastructure.html">Infrastructure</a>
                            <a class="dropdown-item" href="building.html">Building</a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="all-projects.html">Projects</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="sustainability.html" id="navbarDropdownPortfolio" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Sustainability
                        </a>
                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownPortfolio">
                            <a class="dropdown-item" href="health-and-safety.html">Health &amp; Safety</a>
                            <a class="dropdown-item" href="environment.html">Environment</a>
                            <a class="dropdown-item" href="community.html">Community</a>
                            <a class="dropdown-item" href="quality.html">Quality</a>
                        </div>
                    </li>
                </ul>
            </div>

Ниже приведен скриншот структуры HTML:

Answer 1

Исправлено путем удаления атрибута data-toggle="dropdown" из HTML и добавления css для открытия раскрывающегося списка при наведении курсора с использованием ниже css.

.dropdown:hover .dropdown-menu
{
    display:block;
}

Примечание :Это исправление предназначено только для настольных компьютеров, а НЕ для мобильных устройств.