鼠标移动到这里 B

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

<div class="dropdown">
<a data-lity href="AAA" button type="button" class="btn btn-light">鼠标移动到这里 A</a>
<div class="dropdown-content">
<!-------------下拉内容---------------->
<div class="card text-white bg-dark" style="width: 28rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<!-------------下拉内容---------------->
</div>
</div>

如果下拉菜单被其他内容遮挡了，可以添加style代码，代码如下：

<div class="dropdown" style="position: relative; z-index: 999;">
<a data-lity href="AAA" button type="button" class="btn btn-light">鼠标移动到这里 A</a>
<div class="dropdown-content" style="position: absolute; top: 100%; left: 0; z-index: 999;">
<!-------------下拉内容---------------->
<div class="card text-white bg-dark" style="width: 28rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<!-------------下拉内容---------------->
</div>
</div>

通过将下拉菜单的父容器和下拉内容的位置设置为相对定位和绝对定位，并分别给它们设置不同的z-index值，可以确保下拉菜单显示在其他容器前面。请注意，我在代码中将下拉菜单的z-index值设置为1，将下拉内容的z-index值设置为999。你可以根据实际情况调整这些值。