【发布时间】：2021-08-02 23:42:09
【问题描述】：
通常，我不想在我的项目中添加 Bootstrap 5 下拉菜单，但我得到了一些意想不到的东西。
菜单正确打开，但是当我尝试将鼠标悬停在元素菜单上时，不会触发悬停，如果我单击链接，则不会发生任何事情。似乎我的菜单位于任何其他元素的后面。
这里是：JsFiddle
代码HTML：
<body>
<div id="side-bar">
</div>
<div id="top-bar">
<div class="d-flex justify-content-between top-bar-content">
<div>
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active">
<a href="/accueil">Accueil</a>
</li>
</ol>
</nav>
</div>
<div>
<i class="fas fa-user"></i>
<span class="text-white mx-2">Username</span>
<a href="#" data-bs-toggle="dropdown" aria-expanded="false" id="dropdown_user">
<i class="fas fa-bars"></i>
</a>
<ul class="dropdown-menu" aria-labelledby="dropdown_user">
<li><a class="dropdown-item" href="/utilisateur/1">Mon profil</a></li>
<li><a class="dropdown-item" href="/utilisateur/">Administration</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="/logout">Me déconnecter</a></li>
</ul>
</div>
</div>
</div>
<div id="main-content">
Suuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuper
loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text
<div>
<i class="fas fa-user"></i>
<span class="text-white mx-2">Username</span>
<a href="#" data-bs-toggle="dropdown" aria-expanded="false" id="dropdown_user">
<i class="fas fa-bars"></i>
</a>
<ul class="dropdown-menu" aria-labelledby="dropdown_user">
<li><a class="dropdown-item" href="/utilisateur/1">Mon profil</a></li>
<li><a class="dropdown-item" href="/utilisateur/">Administration</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="/logout">Me déconnecter</a></li>
</ul>
</div>
</div>
代码萨斯：
body
background-color: ghostwithe
min-height: 100%
a
text-decoration: none !important
color: inherit !important
$breadcrumb-divider-color: black
$breadcrumb-active-color: black
.bold
font-weight: bold
#side-bar
position: fixed
width: 260px
z-index: 1000
left: 0
top: 0
border-right: 1px solid #162636
min-height: 100vh
border-right: 3px solid grey
#top-bar
position: fixed
top: 0
right: 0
width: calc( 100vw - 260px )
height: 50px
background-color: #0984e3
#main-content
position: fixed
right: 0
width: calc( 100vw - 260px )
height: calc( 100vh - 50px )
margin-top: 50px
padding-left: 5px
padding-right: 5px
overflow-y: auto
overflow-x: hidden
hr
margin: 2px auto 2px auto
border: none
height: 2px !important
hr.cyan
color: cyan
hr.grey
color: #162636
.top-bar-content
margin: 13px
.breadcrumb
margin-bottom: 0 !important
color: black
.breadcrumb-item
&.active
color: white
&:hover
color: white !important
但如果我将下拉菜单放在其他地方，它会正常工作（如在#main-content div [参见 jsfiddle] 中）。
我浏览了网络，但似乎它们与我的问题没有任何相似的问题。
这里有一些类似的案例在我的案例中没有给我一个有用的答案：
它们不是错误消息。
我不想与我的下拉菜单交互。
希望有人有解决方案，我很乐意为您提供更多信息。
谢谢！
编辑：就在 $breadcrumb-active-color 下，它们通常是
@import "~bootstrap/scss/bootstrap"
我从 JsFiddle 中删除，因为我认为它与 JsFiddle 引导导入冲突
【问题讨论】：
标签： html css bootstrap-5