An issue has been identified that is specific to Chrome. The dropright selected menu appears differently in Chrome compared to Firefox, where it displays correctly with a white background.
!https://i.sstatic.net/BulRA.jpg
The Bootstrap version being used is 4.3 . Attempts have been made to set the following CSS properties: {border:none !important; outline:none !important; background: transparent !important; box-shadow: none !important; white-space: nowrap;} at .dropright:hover > a .
/---------- drop down primary ------/
.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);
}
and the html is
<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>