如何在具有子菜单的引导（v4.1.1）导航中提供指向顶级锚标记的链接？答案

【问题标题】：How to provide link to top level anchor tag in bootstrap(v4.1.1) navigation having sub menu?如何在具有子菜单的引导（v4.1.1）导航中提供指向顶级锚标记的链接？
【发布时间】：2019-03-12 04:23:29
【问题描述】：

我想在引导菜单中提供指向顶级锚标记的链接。我正在使用data-toggle="dropdown" 到父锚标记来打开其子菜单。但这将禁用其href 链接。如何将href 提供给顶部锚标记并保留下拉菜单功能？

我搜索了很多，发现了一个类似的问题here但我不想使用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 结构的屏幕截图：

【问题讨论】：

显示代码而不是图像（最好在 sn-p 中设置）
如果可以，请将您的实际代码作为文本编辑到您的问题中 - 代码单独的图像是tedious and difficult，可以使用和调试.它会迫使那些本来愿意帮助你的人先transcribe your image，这是浪费时间。
@Rishi Jagati 当你想在悬停时显示下拉菜单？
你使用什么版本的引导程序？
我想提供一个指向顶级锚点的链接。点击或悬停。

标签： html css twitter-bootstrap drop-down-menu

【解决方案1】：

已修复，方法是从 HTML 中删除 data-toggle="dropdown" 属性并添加 css 以使用下方 css 在悬停时打开下拉菜单。

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

注意：此修复仅适用于桌面，不适用于移动设备。

【讨论】：