Наведите курсор мыши на первое меню, другое меню будет получать разные шрифты только в Firefox

Question

В моем коде я добавил курсор мыши для всех меню, которые добавляют цвет фона blue.Mouse hover работает отлично во всех браузерах. Но в Firefox , когда я наводил указатель мыши на первое меню, шрифты других меню менялись. Я искал много вещей, но, похоже, не работает. Могу ли я получить помощь?

Ниже HTML код:

  <div class="navbar-header"> 
       <input class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar" value="humburger" type="button"> 



       <a class="navbar-brand" href="#"> 
        <img src="/Images/enterprise_nav_globalnav_usaalogo.svg" class="img-responsive logo-img" alt="USSA"></a> 
      </div> 
      <div id="myNavbar" class="collapse navbar-collapse"> 
       <ul class="nav navbar-nav font-bold"> 
        <li class="dropdown provider-menu"> 
         <a id="hypProviderHome">ACCOUNT</a> 
         <div class="dropdown-content"> 
          <a id="hypAddProvider" href="AccountUpdate.aspx">Update Account Information</a> 
          <a id="hypRegisteredProvider" href="ProviderList.aspx">Update Provider Information</a> 
          <a id="hypNewProvider" href="NewProvider.aspx">Register New Provider</a> 
          <a id="hypResetPassword" href="../Account/ChangePassword.aspx">Change Password</a> 
         </div> 
        </li> 
        <li class="provider-menu"><a id="hypHome" href="ProviderHome.aspx">HOME</a></li> 
        <li class="provider-menu"><a href="#">ABOUT</a></li> 
        <li class="provider-menu"><a href="#">CONTACT</a></li> 
       </ul> 
       <ul class="nav navbar-nav navbar-right"> 
        <li class="provider-menu"> 
         <a id="lnkLogOff" class="logoff" href="javascript:__doPostBack('ctl00$lnkLogOff','')">LOGOFF</a> 
        </li> 
       </ul> 


     </div> 
    </nav>                         CSS for same:.provider-menu:hover { 
    background-color: #3071AF; 
} 

li.provider-menu { 
    display: inline-block; 
} 


.dropdown-content a { 
    color: black; 
    padding: 12px 16px; 
    text-decoration: none; 
    display: block; 
    text-align: left; 
} 

.dropdown-content a:hover {background-color: #f1f1f1} 
.dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
} 
.provider-menu:hover .dropdown-content { 
     display: block; 
    }                          The sub menu is visible only for Account Menu not for all.Problem is when i hover mouse on Account menu that time all other menus getting different fonts.This issue is only on Firefox .And font is declared only for body tag which is font-family:Verdana,Arial,Helvetica,sans-serif; 

Answer 1

Установите семейство шрифтов для элементов

.dropdown-content a { 
    font-family: 'Your font', Arial, sans-serif ; 
}