我是引导程序的新手。昨天花了 6 个小时试图让这个工作完全
我让它工作了，所以它会在一个较小的屏幕上折叠起来以显示汉堡包。行。 我让它工作，所以它可以做多个子菜单（ish）。手机上OK。在桌面上正常（当我手动缩小浏览器宽度时在桌面上不起作用，当我点击时二级子菜单不做任何事情，但我可以忍受，因为它适用于实际的移动设备）。
但互联网上的所有示例都使用示例中的典型 href="#" 显示并确认其有效。
所以我认为我已经让它工作了，然后我将最深的子菜单链接之一（应该是最简单的）更改为例如“http://www.bbc.co.uk”。然后它可以在桌面上运行（但不能在移动设备上运行）。
我试过 chrome、firefox。在移动设备上也是如此。
所以我需要帮助。有没有人有一个完整的快速和肮脏的例子与实际工作链接？我敢肯定它是可能的。但我迷路了。
（我去掉了下面的一些 V 形符号，以便我可以显示标题中的内容，以便您确定，仅供参考）。
!DOCTYPE HTML html lang="zh" 头 元字符集=“utf-8” meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no"
<块引用><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!--<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>-->
<!--Bootstrap files(jQuery first, then Popper.js, then Bootstrap JS)-->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" type="text/javascript"></script>
<script type="text/javascript">
/// some script
// jquery ready start
$(document).ready(function () {
// jQuery code
//////////////////////// Prevent closing from click inside dropdown
$(document).on('click', '.dropdown-menu', function (e) {
e.stopPropagation();
});
// make it as accordion for smaller screens
if ($(window).width() < 992) {
$('.dropdown-menu a').click(function (e) {
e.preventDefault();
if ($(this).next('.submenu').length) {
$(this).next('.submenu').toggle();
}
$('.dropdown').on('hide.bs.dropdown', function () {
$(this).find('.submenu').hide();
})
});
}
}); // jquery end
</script>
<style type="text/css">
/* ============ only desktop view ============ */
@media all and (min-width: 992px) {
.navbar .nav-item .dropdown-menu {
display: block;
opacity: 0;
visibility: hidden;
transition: .3s;
margin-top: 0;
color: black;
}
.navbar .nav-item:hover .nav-link {
color: black;
}
.navbar .dropdown-menu.fade-down {
top: 80%;
transform: rotateX(-75deg);
transform-origin: 0% 0%;
}
/* .navbar .dropdown-menu.fade-up {
top: 180%;
}*/
.navbar .nav-item:hover .dropdown-menu {
transition: .3s;
opacity: 1;
visibility: visible;
top: 100%;
transform: rotateX(0deg);
}
.navbar .nav-item .submenu {
display: none;
position: absolute;
left: 100%;
top: -7px;
}
.navbar .dropdown-menu > li:hover {
background-color: #f1f1f1;
}
.navbar .dropdown-menu > li:hover > .submenu {
display: block;
top: -4px;
color: purple;
}
/* new */
li:hover > .submenu {
display: block;
position: relative;
left: 100%;
top: auto;
}
ul.dropdown-menu li {
position: relative;
}
}
/* ============ desktop view .end// ============ */
.navbar ul.dropdown-menu a.dropdown-item {
display: block;
width: 100%;
padding: .25rem 1.5rem;
clear: both;
font-weight: 400;
color: purple;
text-align: inherit;
white-space: nowrap;
background-color: transparent;
border: 0
}
</style>
<!-- ========================= SECTION CONTENT ========================= -->
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark bg-secondary ">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main_nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main_nav">
<ul class="navbar-nav">
<li class="nav-item active"> <a class="nav-link" href="#">Home </a> </li>
<li class="nav-item"><a class="nav-link" href="#"> About </a></li>
<li class="nav-item"><a class="nav-link" href="#"> Services </a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown"> Hover up </a>
<ul class="dropdown-menu fade-up">
<li><a class="dropdown-item" href="#"> Submenu item 1</a></li>
<li><a class="dropdown-item" href="#"> Submenu item 2 </a></li>
<li>
<a class="dropdown-item" href="#"> testsubmenu2 </a>
<ul class="submenu dropdown-menu">
<li><a class="" href="http://www.bbc.co.uk">Submenu item 1</a></li>
<li><a class="" href="#">Submenu item 2</a></li>
<li><a class="" href="#">Submenu item 4</a></li>
<li><a class="" href="#">Submenu item 5</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#"> Submenu item 3 </a></li>
<li><a class="dropdown-item" href="#"> Submenu item 4 </a></li>
</ul>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#"> Menu item </a></li>
<li class="nav-item"><a class="nav-link" href="#"> Menu item </a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown"> Hover down </a>
<ul class="dropdown-menu dropdown-menu-right fade-down">
<li><a class="dropdown-item" href="#"> Submenu item 1</a></li>
<li><a class="dropdown-item" href="#"> Submenu item 2 </a></li>
<li><a class="dropdown-item" href="#"> Submenu item 3</a></li>
<li><a class="dropdown-item" href="#"> Submenu item 4 </a></li>
</ul>
</li>
</ul>
</div> <!-- navbar-collapse.// -->
</nav>
</div><!-- container // -->
块引用