更改移动 megamenu 下拉菜单的背景颜色

Question

我正在尝试使用我在此处找到的以下 Bootstrap megamenu： http://jsfiddle.net/apougher/ydcMQ/

我想不通的是，当我在移动视图中单击类别 link 时，如何阻止类别下拉列表的背景颜色变为灰色。我希望它保持白色。

这是我在移动视图中点击类别时的结果：

这就是我想要的。（即使我点击类别，背景颜色仍保持白色）

我错过了什么？

<div class="navbar navbar-default navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li class="dropdown menu-large"">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Product Listing <b class="caret"></b> </a>
              <ul class="dropdown-menu megamenu row">
                <li>
    <div class="col-sm-6 col-md-3">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/150x120" />
      </a>
    </div>
    <div class="col-sm-6 col-md-3">
    <a href="#" class="thumbnail">
        <img src="http://placehold.it/150x120" />
      </a>
    </div>
    <div class="col-sm-6 col-md-3">
    <a href="#" class="thumbnail">
        <img src="http://placehold.it/150x120" />
      </a>
    </div>
    <div class="col-sm-6 col-md-3">
     <a href="#" class="thumbnail">
        <img src="http://placehold.it/150x120" />
      </a>
    </div>
                </li>
              </ul>
        </li>

        <li class="dropdown menu-large">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Categories <b class="caret"></b></a>             
            <ul class="dropdown-menu megamenu row">
                <li class="col-sm-3">
                    <ul>
                        <li class="dropdown-header">Glyphicons</li>
                        <li><a href="#">Available glyphs</a></li>
                        <li class="disabled"><a href="#">How to use</a></li>
                        <li><a href="#">Examples</a></li>
                        <li class="divider"></li>
                        <li class="dropdown-header">Dropdowns</li>
                        <li><a href="#">Example</a></li>
                        <li><a href="#">Aligninment options</a></li>
                        <li><a href="#">Headers</a></li>
                        <li><a href="#">Disabled menu items</a></li>
                    </ul>
                </li>
                <li class="col-sm-3">
                    <ul>
                        <li class="dropdown-header">Button groups</li>
                        <li><a href="#">Basic example</a></li>
                        <li><a href="#">Button toolbar</a></li>
                        <li><a href="#">Sizing</a></li>
                        <li><a href="#">Nesting</a></li>
                        <li><a href="#">Vertical variation</a></li>
                        <li class="divider"></li>
                        <li class="dropdown-header">Button dropdowns</li>
                        <li><a href="#">Single button dropdowns</a></li>
                    </ul>
                </li>
                <li class="col-sm-3">
                    <ul>
                        <li class="dropdown-header">Input groups</li>
                        <li><a href="#">Basic example</a></li>
                        <li><a href="#">Sizing</a></li>
                        <li><a href="#">Checkboxes and radio addons</a></li>
                        <li class="divider"></li>
                        <li class="dropdown-header">Navs</li>
                        <li><a href="#">Tabs</a></li>
                        <li><a href="#">Pills</a></li>
                        <li><a href="#">Justified</a></li>
                    </ul>
                </li>
                <li class="col-sm-3">
                    <ul>
                        <li class="dropdown-header">Navbar</li>
                        <li><a href="#">Default navbar</a></li>
                        <li><a href="#">Buttons</a></li>
                        <li><a href="#">Text</a></li>
                        <li><a href="#">Non-nav links</a></li>
                        <li><a href="#">Component alignment</a></li>
                        <li><a href="#">Fixed to top</a></li>
                        <li><a href="#">Fixed to bottom</a></li>
                        <li><a href="#">Static top</a></li>
                        <li><a href="#">Inverted navbar</a></li>
                    </ul>
                </li>
            </ul>

        </li>
    </ul>
    </div>
  </div>
</div>

CSS

           .navbar-default{
            color: #fff;
            background-color: #ccc6c6;
            border-color: #aca1a2;
        }
        .navbar-default .navbar-nav > li > a{
            color:#fff;
        }
        .navbar-default .navbar-nav > .dropdown > a .caret{
            border-top-color: #fff;
            border-bottom-color: #fff;
        }
        .navbar-default .navbar-brand{
            color:#fff;
        }
        .menu-large {
          position: static !important;
        }
        .megamenu{
          padding: 20px 0px;
          width:100%;
        }
        .megamenu> li > ul {
          padding: 0;
          margin: 0;
        }
        .megamenu> li > ul > li {
          list-style: none;
        }
        .megamenu> li > ul > li > a {
          display: block;
          padding: 3px 20px;
          clear: both;
          font-weight: normal;
          line-height: 1.428571429;
          color: #333333;
          white-space: normal;
        }
        .megamenu> li ul > li > a:hover,
        .megamenu> li ul > li > a:focus {
          text-decoration: none;
          color: #262626;
          background-color: #f5f5f5;
        }
        .megamenu.disabled > a,
        .megamenu.disabled > a:hover,
        .megamenu.disabled > a:focus {
          color: #999999;
        }
        .megamenu.disabled > a:hover,
        .megamenu.disabled > a:focus {
          text-decoration: none;
          background-color: transparent;
          background-image: none;
          filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
          cursor: not-allowed;
        }
        .megamenu.dropdown-header {
          color: #428bca;
          font-size: 18px;
        }
        @media (max-width: 768px) {
          .megamenu{
            margin-left: 0 ;
            margin-right: 0 ;
          }
          .megamenu> li {
            margin-bottom: 30px;
          }
          .megamenu> li:last-child {
            margin-bottom: 0;
          }
          .megamenu.dropdown-header {
            padding: 3px 15px !important;

          }
          .navbar-nav .open .dropdown-menu .dropdown-header{
            color:#fff;
          }
        }

Answer 1

用

覆盖Bootstrap的css

.navbar-default .navbar-nav > .open > a{
   background : transparent !important;
 }

这是更新后的工作jsFiddle

现在查看演示。更新了菜单。

在 css

中再添加两个样式

.navbar-nav .open .dropdown-menu{
  background : white;
}
.navbar-nav .open .dropdown-menu .dropdown-header{
  color : #999999 !important;
 }

Answer 2

更改这些行

在我的例子中，这个代码在 bootstrap.css

.navbar-default {
    background-color: #ffffff;
    border-color: #f8f8f8
}

.navbar-default .navbar-brand {
    color: #ffffff
}

.navbar-default .navbar-brand:focus,
.navbar-default .navbar-brand:hover {
    color: #ffffff;
    background-color: #0094FF;
}

.navbar-default .navbar-text {
    color: #ffffff
}

.navbar-default .navbar-nav>li>a {
    color: #ffffff
}

.navbar-default .navbar-nav>li>a:focus{
    color: #ffffff;
    background-color: #0094FF;
}

.navbar-default .navbar-nav>li>a:hover {
    color: #0065BD  ;
    background-color: #ffffff;
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
    color: #555;
    background-color: #ffffff
}

.navbar-default .navbar-nav>.disabled>a,
.navbar-default .navbar-nav>.disabled>a:focus,
.navbar-default .navbar-nav>.disabled>a:hover {
    color: #ccc;
    background-color: transparent
}

另外一个文件demo.css:

body {
  padding-bottom: 40px;
  color: #004165;
}

另一个 css 代码在 bootstrap-theme.min.css:

.navbar-default {
    background-image: -webkit-linear-gradient(top, #004165 0, #004165 100%);
    background-image: -o-linear-gradient(top, #004165 0, #004165 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#004165), to(#004165));
    background-image: linear-gradient(to bottom, #005E91 0, #005E91 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#004165', endColorstr='#004165', GradientType=0);
    filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
    background-repeat: repeat-x;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075)
}

bootstrap.min.css 中的另一项更改（仅最后一行将按钮品牌文本更改为白色）

.navbar-header{

display:inherit;
    padding-top: 20px;
padding-bottom: 20px;
color:white

}

更改移动 megamenu 下拉菜单的背景颜色

Change background color of mobile megamenu dropdown

html

css

megamenu

twitter-bootstrap