Navbar移动显示错误

Question

我是Angular/Bootstrap开发的新品牌，目前正在为慈善机构开发一个网站;

虽然我的Navbar在大型（笔记本电脑/ PC）显示器上工作完美，但通过移动设备（小屏幕）查看时，您将鼠标悬停的任何菜单项都变为透明。

我知道它明显是一个CSS属性，我假设它的悬停属性，但我不知道如何表达它在我的自定义CSS。

这里有一个截屏，显示我的意思

我使用下面的CSS代码，以帮助格式化我的导航栏..

.navbar-xs { min-height:65px; height: 65px; background-color: #ffffff; border: 0;} 
.navbar-xs .navbar-brand{ padding: 0px 12px;font-size: 20px;line-height: 35px; background-color: #ffffff;} 
.navbar-xs .navbar-nav > li > a { padding-top: 15px; padding-bottom: 5px; line-height: 28px; color: #000fb5; background-color: #ffffff; } 
body { 
    padding-top: 65px; 
} 

而这里的HTML的一个小样本导航栏（其大菜单，所以我只包括一个样本）

<nav class="navbar navbar-xs navbar-default navbar-fixed-top" role="navigation"> 
       <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a href="#/" class="pull-left"><img src="images/logo.png"></a> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav navbar-right"> 

      <!-- Home Menu --> 
      <li class="dropdown"> 
       <a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><b>Home </b><span class="caret"></span></a> 
       <ul class="dropdown-menu multi-level"> 
       <li class="dropdown-submenu"> 
        <a href="" class="dropdown-toggle" data-toggle="dropdown">About Us</a> 
        <ul class="dropdown-menu"> 
         <li><a href="#who">Who We Are</a></li> 
         <li><a href="#what">What We Do</a></li> 
         <li><a href="#why">Why We Do It</a></li> 
         <li><a href="#history">Our History</a></li> 
        </ul> 
        </li> 
       <li><a href="#news">Latest News</a></li> 
       <li><a href="#events">Coming Events</a></li> 
       <li><a href="#calendar">Calendar</a></li> 
       <li><a href="#ceo">CEO Message</a></li> 
       <li><a href="#bibleRead">Bible Reading</a></li> 
       <li><a href="#pray">Pray For Us</a></li> 
       </ul> 
      </li> 

否则，网站目前可以在这里查看; Current Website

否则，我的源可以在我的GitHub这里查看; GitHub source

如果任何人有任何关于如何改善网站的建议，我欢迎反馈 - 因为慈善机构不会给我提供任何。

Answer 1

你需要的bgcolor添加到您的下拉导航

添加下面的代码应该工作

@media (max-width: 767px){ 
    .navbar-nav .open .dropdown-menu { 
     background-color: #e7e7e7!important; 
    } 
    .container>.navbar-collapse { 
     background-color: #fff!important; 
    } 
} 

Answer 2

您在文件中添加CSS验证码ADDD

.navbar .navbar-collapse.collapse.in { 
overflow: visible; 
}