css - 导航栏移动显示错误

Question

我是 Angular/Bootstrap 开发的新手，目前正在为慈善机构开发网站；

虽然我的导航栏在大型(笔记本电脑/个人电脑)显示器上运行完美，但当通过移动设备(小屏幕)查看时，您悬停在其上的任何菜单项都会变得透明。

我知道它显然是一个 CSS 属性，我假设它是 hover 属性，但我不确定如何在我的自定义 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;
  }
}