Блог

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

!https://imgur.com/vTL2nJ6

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

Попробуйте удалить type=button из меню dropright

Это должно быть

 <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>