我在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 & 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 & 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;
}
}