Bootstrap下拉菜单不滚动

Question

我在louiseballantine.com/redesign/bridal.php使用的下拉菜单遇到了一些问题。

在显示折叠菜单的较小屏幕上，您会注意到菜单似乎最初运行良好。但是，当您激活 Bridal＆amp;场合子菜单，有一个滚动问题，部分菜单无法访问。

不可否认，Bootstrap对我来说很新，当我尝试通过与各种菜单相关的多种样式时，我会有点迷失，但我尝试添加/编辑各种 max-height 和溢出声明但没有成功。

有些事情也让我感到恼火的是，菜单似乎是基于：悬停而不是点击时运行的。我也想解决这个问题。

请原谅我的经验不足。非常感谢任何建议或协助。

:::::更新:::::

似乎我对滚动问题一直不清楚。这在手持设备上似乎很明显。例如，在我的iPhone上，菜单看起来很好，但是当你打开 Bridal＆amp;场合子菜单，无法在图库下面看到任何内容。

同样，我已经玩过各种 max-height 和溢出设置，但似乎找不到问题。任何帮助将不胜感激。

::: Navbar HTML :::

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav navbar-left" style="width:100%;">
    <li class="hidden">
      <a href="#page-top"></a>
    </li>
    <li><a href="bridal.php" target="_self" id="homenav">Home</a></li>
    <li><a href="about.php" target="_self" id="aboutnav">Bio</a></li>
    <li class="dropdown"><a href="#" id="bridalnav" data-toggle="dropdown" class="dropdown-toggle">Bridal &amp; Occasion <b class="caret"></b></a>
      <ul class="dropdown-menu" id="dropdown">
        <li><a href="bridalmakeup.php" target="_self" id="makeupnav">Bridal Makeup</a></li>
        <li><a href="makeuplessons.php" target="_self" id="lessonsnav">Makeup Lessons</a></li>
        <li><a href="occasionmakeup.php" target="_self" id="occasionnav">Occasion &amp; Events</a></li>
        <li><a href="hairextensions.php" target="_self" id="extensionsnav">Hair Extensions</a></li>
        <li><a href="spraytanning.php" target="_self" id="tanningnav">Spray Tanning</a></li>
      </ul>
    </li>
    <li><a href="bridalgallery.php" target="_self" id="gallerynav">Gallery</a></li>
    <li><a href="makeuptutorialvideos.php" target="_self" id="videossnav">Videos</a></li>
    <li><a href="reviews.php" target="_self" id="testimonialsnav">Reviews</a></li>
    <li><a href="rates.php" target="_self" id="ratesnav">Rates</a></li>
    <li><a href="contact.php" target="_self" id="contactnav">Contact</a></li>
  </ul>
</div>

::: Navbar CSS（Bootstrap）:::

.dropdown {position: relative;}
.dropdown-toggle:focus {outline: 0;}
.dropdown:hover .dropdown-menu {display: block;}

.dropdown-menu {
/*position: absolute;*/
position: relative;
top: 100%;
left: 0;
z-index: 1100;
display: none;
float: left;
/*min-width: 20em;*/
width: 100%;
padding: 0;
margin: 1em 0;
font-size: 1em;
text-align: left;
list-style: none;
background-color: transparent;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-webkit-box-shadow: 0 6px 6px rgba(0, 0, 0, .25);
box-shadow: 0 6px 6px rgba(0, 0, 0, .25);
}

/* Media Query increased from 768px to 770px to account for Portrait iPad */
@media (min-width: 770px) {
.dropdown-menu {
  position: absolute;
  width: auto;
  min-width: 20em;
  margin: 0;
  border: 1px solid #CCC;
  -webkit-box-shadow: 0 6px 6px rgba(0, 0, 0, .5);
  box-shadow: 0 6px 6px rgba(0, 0, 0, .5);
}
}
.dropdown-menu.pull-right {
  right: 0;
  left: auto;
}
.dropdown-menu .divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #CCC;
}
.dropdown-menu > li > a {
  display: block;
  padding: 0.5em 2em;
  clear: both;
  font-weight: normal;
  line-height: 1.5;
  color: #FFF;
  background-color: #111;
  white-space: nowrap;
}
/* Media Query increased from 768px to 770px to account for Portrait iPad */
@media (min-width: 770px) {
.dropdown-menu > li > a {
  color: #000;
  background-color: rgba(255,255,255,.95);
}
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  color: #CCC;
  text-decoration: none;
  background-color: rgba(0,0,0,.95);
}
/* Media Query increased from 768px to 770px to account for Portrait iPad */
@media (min-width: 770px) {
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  color: #666;
  background-color: rgba(0,0,0,.95);
}
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  color: #000;
  text-decoration: none;
  background-color: rgba(40,40,40,1.0);
  outline: 0;
}
/* Media Query increased from 768px to 770px to account for Portrait iPad */
@media (min-width: 770px) {
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  color: #000;
  text-decoration: none;
  background-color: rgba(255,255,255,1.0);
  outline: 0;
}
}
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
  color: #777;
}
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
  text-decoration: none;
  cursor: not-allowed;
  background-color: transparent;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.open > .dropdown-menu {
  display: block;
}
.open > a {
  outline: 0;
}
.dropdown-menu-right {
  right: 0;
  left: auto;
}
.dropdown-menu-left {
  right: auto;
  left: 0;
}
.dropdown-header {
  display: block;
  padding: 3px 20px;
  font-size: 12px;
  line-height: 1.42857143;
  color: #777;
  white-space: nowrap;
}
.dropdown-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 990;
}
.pull-right > .dropdown-menu {
  right: 0;
  left: auto;
}
.dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
  content: "";
  border-top: 0;
  border-bottom: 4px solid;
}
.dropup .dropdown-menu,
.navbar-fixed-bottom .dropdown .dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-bottom: 1px;
}
/* Media Query increased from 768px to 770px to account for Portrait iPad */
@media (min-width: 770px) {
  .navbar-right .dropdown-menu {
    right: 0;
    left: auto;
  }
  .navbar-right .dropdown-menu-left {
    right: auto;
    left: 0;
  }
}

.nav {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.nav > li {
  position: relative;
  display: block;
}
.nav > li > a {
  position: relative;
  display: block;
  padding: 0 1em;
}
.nav > li > a:hover,
.nav > li > a:focus {
  text-decoration: none;
  background-color: #999;
}
.nav > li.disabled > a {
  color: #777;
}
.nav > li.disabled > a:hover,
.nav > li.disabled > a:focus {
  color: #777;
  text-decoration: none;
  cursor: not-allowed;
  background-color: transparent;
}
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
  background-color: #eee;
  border-color: #428bca;
}
.nav .nav-divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}
.nav > li > a > img {
  max-width: none;
}
.nav-tabs {
  border-bottom: 1px solid #ddd;
}
.nav-tabs > li {
  float: left;
  margin-bottom: -1px;
}
.nav-tabs > li > a {
  margin-right: 2px;
  line-height: 1.42857143;
  border: 1px solid transparent;
  border-radius: 4px 4px 0 0;
}
.nav-tabs > li > a:hover {
  border-color: #eee #eee #ddd;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: #555;
  cursor: default;
  background-color: #fff;
  border: 1px solid #ddd;
  border-bottom-color: transparent;
}
.nav-tabs.nav-justified {
  width: 100%;
  border-bottom: 0;
}
.nav-tabs.nav-justified > li {
  float: none;
}
.nav-tabs.nav-justified > li > a {
  margin-bottom: 5px;
  text-align: center;
}
.nav-tabs.nav-justified > .dropdown .dropdown-menu {
  top: auto;
  left: auto;
}
/* Media Query increased from 768px to 770px to account for Portrait iPad */
@media (min-width: 770px) {
  .nav-tabs.nav-justified > li {
    display: table-cell;
    width: 1%;
  }
  .nav-tabs.nav-justified > li > a {
    margin-bottom: 0;
  }
}
.nav-tabs.nav-justified > li > a {
  margin-right: 0;
  border-radius: 4px;
}
.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active > a:hover,
.nav-tabs.nav-justified > .active > a:focus {
  border: 1px solid #ddd;
}
/* Media Query increased from 768px to 770px to account for Portrait iPad */
@media (min-width: 770px) {
  .nav-tabs.nav-justified > li > a {
    border-bottom: 1px solid #ddd;
    border-radius: 4px 4px 0 0;
  }
  .nav-tabs.nav-justified > .active > a,
  .nav-tabs.nav-justified > .active > a:hover,
  .nav-tabs.nav-justified > .active > a:focus {
    border-bottom-color: #fff;
  }
}
.nav-pills > li {
  float: left;
}
.nav-pills > li > a {
  border-radius: 4px;
}
.nav-pills > li + li {
  margin-left: 2px;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  color: #fff;
  background-color: #428bca;
}
.nav-stacked > li {
  float: none;
}
.nav-stacked > li + li {
  margin-top: 2px;
  margin-left: 0;
}
.nav-justified {
  width: 100%;
}
.nav-justified > li {
  float: none;
}
.nav-justified > li > a {
  margin-bottom: 5px;
  text-align: center;
}
.nav-justified > .dropdown .dropdown-menu {
  top: auto;
  left: auto;
}
/* Media Query increased from 768px to 770px to account for Portrait iPad */
@media (min-width: 770px) {
  .nav-justified > li {
    display: table-cell;
    width: 1%;
  }
  .nav-justified > li > a {
    margin-bottom: 0;
  }
}
.nav-tabs-justified {
  border-bottom: 0;
}
.nav-tabs-justified > li > a {
  margin-right: 0;
  border-radius: 4px;
}
.nav-tabs-justified > .active > a,
.nav-tabs-justified > .active > a:hover,
.nav-tabs-justified > .active > a:focus {
  border: 1px solid #ddd;
}
/* Media Query increased from 768px to 770px to account for Portrait iPad */
@media (min-width: 770px) {
  .nav-tabs-justified > li > a {
    border-bottom: 1px solid #ddd;
    border-radius: 4px 4px 0 0;
  }
  .nav-tabs-justified > .active > a,
  .nav-tabs-justified > .active > a:hover,
  .nav-tabs-justified > .active > a:focus {
    border-bottom-color: #fff;
  }
}
.tab-content > .tab-pane {
  display: none;
}
.tab-content > .active {
  display: block;
}
.nav-tabs .dropdown-menu {
  margin-top: -1px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.navbar {
  position: relative;
  min-height: 2em;
  margin-bottom: 0;
  border: 1px solid transparent;
}
/* Media Query increased from 768px to 770px to account for Portrait iPad */
@media (min-width: 770px) {
  .navbar-header {
    float: left;
  }
}
.navbar-collapse {
  padding-right: 15px;
  padding-left: 15px;
  overflow-x: visible;
  -webkit-overflow-scrolling: touch;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
.navbar-collapse.in {
  overflow-y: auto;
}
/* Media Query increased from 768px to 770px to account for Portrait iPad */
@media (min-width: 770px) {
  .navbar-collapse {
    width: auto;
    -webkit-box-shadow: none;
            box-shadow: none;
    padding:0;
    background-color:#eee;
  }
  .navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
  }
  .navbar-collapse.in {
    overflow-y: visible;
  }
  .navbar-fixed-top .navbar-collapse,
  .navbar-static-top .navbar-collapse,
  .navbar-fixed-bottom .navbar-collapse {
    padding-right: 0;
    padding-left: 0;
  }
}
.navbar-fixed-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
  max-height: none; /* was 340px */
}
@media (max-width: 480px) and (orientation: landscape) {
  .navbar-fixed-top .navbar-collapse,
  .navbar-fixed-bottom .navbar-collapse {
    max-height: none; /* was 240px */
  }
}

.navbar-static-top {
  z-index: 1000;
  border-width: 0 0 1px;
}
/* Media Query increased from 768px to 770px to account for Portrait iPad */
@media (min-width: 770px) {
  .navbar-static-top {
    border-radius: 0;
  }
}
.navbar-fixed-top,
.navbar-fixed-bottom {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 1030;
  -webkit-transform: translate3d(0, 0, 0);
       -o-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
/* Media Query increased from 768px to 770px to account for Portrait iPad */
@media (min-width: 770px) {
  .navbar-fixed-top,
  .navbar-fixed-bottom {
    border-radius: 0;
  }
}
.navbar-fixed-top {
  top: 0;
  border-width: 0 0 1px;
}
.navbar-fixed-bottom {
  bottom: 0;
  margin-bottom: 0;
  border-width: 1px 0 0;
}
.navbar-brand {
  float: left;
  height: 50px;
  padding: 15px 15px;
  font-size: 18px;
  line-height: 20px;
}
.navbar-brand:hover,
.navbar-brand:focus {
  text-decoration: none;
}
/* Media Query increased from 768px to 770px to account for Portrait iPad */
@media (min-width: 770px) {
  .navbar > .container .navbar-brand,
  .navbar > .container-fluid .navbar-brand {
    margin-left: -15px;
  }
}
.navbar-toggle {
  position: relative;
  float: right;
  padding: 9px 10px;
  margin-top: 12px;
  margin-right: 15px;
  margin-bottom: 12px;
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}
.navbar-toggle:focus {
  outline: 0;
}
.navbar-toggle .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 0px;
}
.navbar-toggle .icon-bar + .icon-bar {
  margin-top: 4px;
}
/* Media Query increased from 768px to 770px to account for Portrait iPad */
@media (min-width: 770px) {
  .navbar-toggle {
    display: none;
  }
}
.navbar-nav {
  margin: 7.5px -15px;
}
.navbar-nav > li > a {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 20px;
}
/* Media Query increased from 767px to 769px to account for Portrait iPad */
@media (max-width: 769px) {
  .navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .navbar-nav .open .dropdown-menu > li > a,
  .navbar-nav .open .dropdown-menu .dropdown-header {
    padding: 5px 15px 5px 25px;
  }
  .navbar-nav .open .dropdown-menu > li > a {
    line-height: 20px;
  }
  .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-nav .open .dropdown-menu > li > a:focus {
    background-image: none;
  }
}
/* Media Query increased from 768px to 770px to account for Portrait iPad */
@media (min-width: 770px) {
  .navbar-nav {
    float: left;
    margin: 0;
  }
  .navbar-nav > li {
    float: left;
  }
  .navbar-nav > li > a {
    padding-top: 15px;
    padding-bottom: 15px;
  }
  .navbar-nav.navbar-right:last-child {
    margin-right: -15px;
  }
}
/* Media Query increased from 768px to 770px to account for Portrait iPad */
@media (min-width: 770px) {
  .navbar-left {
    float: left !important;
  }
  .navbar-right {
    float: right !important;
  }
}
.navbar-form {
  padding: 10px 15px;
  margin-top: 8px;
  margin-right: -15px;
  margin-bottom: 8px;
  margin-left: -15px;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
}
/* Media Query increased from 768px to 770px to account for Portrait iPad */
@media (min-width: 770px) {
  .navbar-form .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
  }
  .navbar-form .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }
  .navbar-form .input-group {
    display: inline-table;
    vertical-align: middle;
  }
  .navbar-form .input-group .input-group-addon,
  .navbar-form .input-group .input-group-btn,
  .navbar-form .input-group .form-control {
    width: auto;
  }
  .navbar-form .input-group > .form-control {
    width: 100%;
  }
  .navbar-form .control-label {
    margin-bottom: 0;
    vertical-align: middle;
  }
  .navbar-form .radio,
  .navbar-form .checkbox {
    display: inline-block;
    margin-top: 0;
    margin-bottom: 0;
    vertical-align: middle;
  }
  .navbar-form .radio label,
  .navbar-form .checkbox label {
    padding-left: 0;
  }
  .navbar-form .radio input[type="radio"],
  .navbar-form .checkbox input[type="checkbox"] {
    position: relative;
    margin-left: 0;
  }
  .navbar-form .has-feedback .form-control-feedback {
    top: 0;
  }
}
/* Media Query increased from 767px to 769px to account for Portrait iPad */
@media (max-width: 769px) {
  .navbar-form .form-group {
    margin-bottom: 5px;
  }
}
/* Media Query increased from 768px to 770px to account for Portrait iPad */
@media (min-width: 770px) {
  .navbar-form {
    width: auto;
    padding-top: 0;
    padding-bottom: 0;
    margin-right: 0;
    margin-left: 0;
    border: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .navbar-form.navbar-right:last-child {
    margin-right: -15px;
  }
}
.navbar-nav > li > .dropdown-menu {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.navbar-btn {
  margin-top: 8px;
  margin-bottom: 8px;
}
.navbar-btn.btn-sm {
  margin-top: 10px;
  margin-bottom: 10px;
}
.navbar-btn.btn-xs {
  margin-top: 14px;
  margin-bottom: 14px;
}
.navbar-text {
  margin-top: 15px;
  margin-bottom: 15px;
}
/* Media Query increased from 768px to 770px to account for Portrait iPad */
@media (min-width: 770px) {
  .navbar-text {
    float: left;
    margin-right: 15px;
    margin-left: 15px;
  }
  .navbar-text.navbar-right:last-child {
    margin-right: 0;
  }
}
.navbar-default {
  background-color: #666;
  border-color: #666;
}
.navbar-default .navbar-brand {
  color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #5e5e5e;
  background-color: transparent;
}
.navbar-default .navbar-text {
  color: #777;
}
.navbar-default .navbar-nav > li > a {
  color: #777;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #333;
  background-color: transparent;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #FFF;
  background-color: #666;
}
.navbar-default .navbar-nav > .disabled > a,
.navbar-default .navbar-nav > .disabled > a:hover,
.navbar-default .navbar-nav > .disabled > a:focus {
  color: #ccc;
  background-color: transparent;
}
.navbar-default .navbar-toggle {
  border-color: #ddd;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #ddd;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #888;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #666;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #FFF;
  background-color: #333;
}
/* Media Query increased from 767px to 769px to account for Portrait iPad */
@media (max-width: 769px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #777;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #333;
    background-color: transparent;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #FFF;
    background-color: #000;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    color: #FFF;
    background-color: #333;
  }
}
.navbar-default .navbar-link {
  color: #777;
}
.navbar-default .navbar-link:hover {
  color: #333;
}
.navbar-default .btn-link {
  color: #777;
}
.navbar-default .btn-link:hover,
.navbar-default .btn-link:focus {
  color: #333;
}
.navbar-default .btn-link[disabled]:hover,
fieldset[disabled] .navbar-default .btn-link:hover,
.navbar-default .btn-link[disabled]:focus,
fieldset[disabled] .navbar-default .btn-link:focus {
  color: #ccc;
}
.navbar-inverse {
  background-color: #222;
  border-color: #080808;
}
.navbar-inverse .navbar-brand {
  color: #777;
}
.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
  color: #fff;
  background-color: transparent;
}
.navbar-inverse .navbar-text {
  color: #777;
}
.navbar-inverse .navbar-nav > li > a {
  color: #777;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
  color: #fff;
  background-color: transparent;
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  color: #fff;
  background-color: #080808;
}
.navbar-inverse .navbar-nav > .disabled > a,
.navbar-inverse .navbar-nav > .disabled > a:hover,
.navbar-inverse .navbar-nav > .disabled > a:focus {
  color: #444;
  background-color: transparent;
}
.navbar-inverse .navbar-toggle {
  border-color: #333;
}
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
  background-color: #333;
}
.navbar-inverse .navbar-toggle .icon-bar {
  background-color: #fff;
}
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
  border-color: #101010;
}
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
  color: #fff;
  background-color: #080808;
}
/* Media Query increased from 767px to 769px to account for Portrait iPad */
@media (max-width: 769px) {
  .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
    border-color: #080808;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu .divider {
    background-color: #080808;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
    color: #777;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #fff;
    background-color: transparent;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #fff;
    background-color: #080808;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a,
  .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    color: #444;
    background-color: transparent;
  }
}
.navbar-inverse .navbar-link {
  color: #777;
}
.navbar-inverse .navbar-link:hover {
  color: #fff;
}
.navbar-inverse .btn-link {
  color: #777;
}
.navbar-inverse .btn-link:hover,
.navbar-inverse .btn-link:focus {
  color: #fff;
}
.navbar-inverse .btn-link[disabled]:hover,
fieldset[disabled] .navbar-inverse .btn-link:hover,
.navbar-inverse .btn-link[disabled]:focus,
fieldset[disabled] .navbar-inverse .btn-link:focus {
  color: #444;
}

::: Navbar CSS（代理主题）:::

#navigation {/*border:1px solid #CCC;*/ margin:0; padding:0;}

.navbar-default .navbar-brand {
    font-family: 'Oswald', serif;
    color: #FFF;
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-brand:active,
.navbar-default .navbar-brand.active {
    color: #FFF;
}

.navbar-default .navbar-collapse {
    /*border-color: rgba(0,0,0,.02)*/;
}

.navbar-default .navbar-toggle {
    border-color: #FFF;
    background-color: #000;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #fff;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #333;
}

.navbar-default .nav li a {
    text-transform: uppercase;
    font-family: 'Oswald', serif;
    font-size: 1.2em;
    font-weight: 300;
    letter-spacing: 1px;
    color: #fff;
}

.navbar-default .nav li a:hover,
.navbar-default .nav li a:focus {
    outline: 0;
    color: #fff;
    background-color:#333;
    -webkit-transition: all .3s;
        -moz-transition: all .3s;
        transition: all .3s;
}

.navbar-default .navbar-nav>.active>a {
    border-radius: 0;
    color: #FFF;
    background-color: #333;
}

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

/* Media Query increased from 768px to 770px to account for Portrait iPad */
@media (min-width: 770px) {
.navbar-default .nav li a {
    color: #000;
}
.navbar-default .nav li a:hover,
.navbar-default .nav li a:focus {
    color: #FFF;
    background-color:#000;
    -webkit-transition: all .3s;
        -moz-transition: all .3s;
        transition: all .3s;
}
.navbar-default .navbar-nav>.active>a {
    color: #FFF;
    background-color: #333;
}
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
    color: #FFF;
    background-color: #000;
}
}

@media(min-width:770px) {
    .navbar-default {
        padding: 0;
        border: 0;
        background-color: #000;
        -webkit-transition: padding .3s;
        -moz-transition: padding .3s;
        transition: padding .3s;
    }

    .navbar-default .navbar-brand {
        font-size: 2em;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        transition: all .3s;
    }

    .navbar-default .navbar-nav>.active>a {
        border-radius: 3px;
    }

    .navbar-default.navbar-shrink {
        padding: 10px 0;
        background-color: #222;
    }

    .navbar-default.navbar-shrink .navbar-brand {
        font-size: 1.5em;
    }
}

:::自定义CSS :::

@media (min-width: 770px) {
.navbar-collapse {background:#FFF;}
.dropdown-menu > li > a {
  display: block;
  padding: 0.5em 2em;
  clear: both;
  font-weight: normal;
  line-height: 1.5;
  color: #000;
  background-color: rgba(210,210,210,.95);
  white-space: nowrap;
}
}