2016-07-28 21 views
-1

在我的代碼中,我添加了鼠標懸停所有菜單,其中添加背景顏色blue.Mouse懸停在所有瀏覽器工作正常。但在Firefox ,當我將鼠標懸停在第一個菜單上時,其他菜單的字體會發生變化。我搜索了很多東西,但似乎無法正常工作。我可以獲得幫助嗎?在第一個菜單的鼠標懸停,其他菜單將在Firefox中獲得不同的字體只有

enter image description here

enter image description here

下面是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; 
+1

如果你不同意你的代碼,我們不能幫你。我認爲錯誤出現在排版不同的子菜單中。但是你需要分享一個可行的例子,讓我們來幫助你。否則這應該被關閉作爲offtopic –

+0

以下是HTML代碼: –

+0

我已更新問題與我的HTML和CSS代碼..我是新的堆棧溢出論壇..請幫助我在那 –

回答

0

設置字體系列的元素

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

謝謝@ marcos..already我已經設置字體爲font-family:「Gotham」,Arial,sans-serif; –

+0

對於以前的評論感到抱歉。我已經將字體設置爲font-family:「Gotham」,Arial,sans-serif;問題出在我將鼠標懸停在賬戶菜單上時,其他菜單喜歡Home,About和Contact獲取不同的字體,意味着它變得模糊text.my代碼很簡單...是否需要添加reset.css或moderize.css這個? –

+0

我不知道,你需要爲我們提供一個工作的例子。閱讀stackoverflow規則:http://stackoverflow.com/help/how-to-ask和http://stackoverflow.com/help/mcve –