html - 为什么 Bootstrap 4 dropright selected 菜单在 Chrome 中显示为浏览器默认按钮？ Firefox 没有问题

Question

出现的问题是 Chrome 特有的。右下角选择的菜单在 Chrome 中显示为浏览器默认按钮，而在 Firefox 中显示为应有的样子，即背面为白色

! https://imgur.com/vTL2nJ6

使用的 Bootstrap 版本是 4.3 。我试过设置 {边界:无!重要；大纲:无!重要；背景:透明!重要；框阴影:无!重要； white-space: nowrap;} at .dropright:hover > a .

/------------ 下拉主要-----/

    .navbar-nav li:hover > ul.dropdown-menu {
        display: block;
    }
    nav li .dropdown-menu  > li > a:hover   {
        color: black !important;
        border-bottom: 3px solid rgba(39, 174, 96, 0);
        box-shadow: none;
    }
    nav li .dropdown-menu > li > a:active   {
        color: black !important;
        border-bottom: 3px solid rgba(39, 174, 96, 0);

    }
    .dropdown:hover .dropdown-menu {
        position: absolute;
        z-index: 1000;
        float: right;
        min-width: 160px;
        padding: 5px 0;
        margin: 2px 0 0;
        font-size: 14px;
        text-align: center;
        list-style: none;
        background-color:rgba(0,0,0,0.3); /* here */
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
        border: 1px solid #ccc;
        border: 1px solid rgba(0,0,0,.15);
        border-radius: 4px;
        -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
        box-shadow: 0 6px 12px rgba(0,0,0,.175);
    }
    .dropdown-menu  li> a{
        color: white !important;
    }
    /* -----level1------ */
    .dropright:hover > .dropdown-menu{
        display: block;


    }
    .dropright:hover > a{
        color: black !important;

    }

    .dropright:hover > .dropdown-menu  > a{
        color: white !important;
    }
    .dropright:hover > .dropdown-menu  > a:hover{
        color: black !important;
        border-bottom: 3px solid rgba(39, 174, 96, 0);
      }

html 是

<li class="nav-item dropdown">
                        <a
                                class="nav-link dropdown-toggle"
                                href="#"
                                id="navbarDropdown"
                                role="button"
                                data-toggle="dropdown"
                                aria-haspopup="true"
                                aria-expanded="false"
                        >
                            WHO WE ARE
                        </a>
                        <ul class="dropdown-menu " aria-labelledby="navbarDropdown">
                            <li><a class="dropdown-item" href="#">About Us</a> </li>
                            <li class="dropdown-item dropright">
                                <a class="dropdown-toggle"
                                   type="button"
                                   id="reachwellStory"
                                   data-toggle="dropdown"
                                   aria-haspopup="true"
                                   aria-expanded="false">The Reachwell Story
                                </a>
                                    <div class="dropdown-menu " aria-labelledby="reachwellStory" >
                                        <a class="dropdown-item" href="#">About</a>
                                        <a class="dropdown-item" href="#">Mission Statement</a>
                                        <a class="dropdown-item" href="#">Vision Statement</a>
                                    </div>
                            </li>

                            <li><a class="dropdown-item" href="#">Leadership</a> </li>
                            <li><a class="dropdown-item" href="#">Strength</a> </li>
                        </ul>
                    </li>

Answer 1

尝试从下拉菜单中删除type=button

应该是

<a class="dropdown-toggle"
  type="button"
  id="reachwellStory"
  data-toggle="dropdown"
  aria-haspopup="true"
  aria-expanded="false">The Reachwell Story
</a>

改为

<a class="dropdown-toggle"
  id="reachwellStory"
  data-toggle="dropdown"
  aria-haspopup="true"
  aria-expanded="false">The Reachwell Story
</a>