如何防止 MathJax 方程与 Bootstrap 5.2 中的下拉菜单重叠？

Question

我正在使用 Bootstrap 5.2 构建一个网站，其中包括导航栏中的 MathJax 方程和下拉菜单。但是，MathJax 方程式与下拉菜单重叠，因此很难使用菜单。我尝试过各种 CSS 解决方案，但到目前为止都没有奏效。

这是我的 HTML

<nav class="navbar navbar-expand-lg navbar-light p_code">
    <a class="navbar-brand logo" href="index.html">
        <img src=".png">TITLE</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" href="index.html">Home</a>
            </li>

等等（多个链接）......然而，这些链接被 MathJax 方程式所掩盖：

我尝试过的：我尝试使用 z-index 属性，调整 MathJax 元素的位置，并修改下拉菜单的样式。但是，这些更改都没有解决问题。

我期待下拉菜单超过 MathJax 方程式的顶部，以便菜单是优先级，而不是方程式。

Answer 1

已解决：

    /* MathJax Overlap */
.dropdown-menu {
  z-index: 1000; /* Set the z-index value of the dropdown menu */
}

.mjx-chtml {
  z-index: 999; /* Set the z-index value of MathJax elements */
}

.navbar {
  z-index: 9999;
}

.dropdown-menu.show {
  position: static;
  float: none;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

现在一旦你知道正确的类，重叠就固定了，你可以适当地设置它们的 z-indexes。