Почему в Chrome меню Boostrap 4, выбранное справа, отображается как кнопка браузера по умолчанию? Firefox не имеет проблем

Question

Возникла проблема, специфичная для Chrome.Выпадающее меню отображается как кнопка браузера по умолчанию в Chrome, в то время как в Firefox оно выглядит так, как должно быть, то есть белым сзади

! https://imgur.com/vTL2nJ6

Используемая версия Bootstrap - 4.3.Я попытался установить {border: none! Важный;план: нет! важно;фон: прозрачный! важный;тень от коробки: нет! важно;пробел: nowrap;} в .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>