Question

我的下拉菜单通过媒体查询设置为较小的设备/屏幕尺寸，当导航栏处于全屏模式时，我有下拉菜单和一些子下拉菜单。这在全屏模式下都能正常工作，但是当我在较小的设备/屏幕尺寸中导航导航栏时，子下拉菜单不会出现？有谁知道我缺少什么才能让它们出现。

Bootstrap overide和媒体查询

       /* Media Queries */

       @media (max-width: 1024px) {
       .nav li { width: 100%; }
       .nav .dropdown ul {display:none; }
       .nav .open ul { display: block; }

      .nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a {
       text-align: center;
       background-color:#211256;
       }



     .nav-collapse .nav > li > a:hover,
     .nav-collapse .dropdown-menu a:hover {
     background-color: #211256;
      color:white;

       }

     .navbar .nav > li  a:hover{
      color:white;
    }

     .navbar .nav .active > a, .navbar .nav .active > a:hover {
     background: #211256;
      color: white;
     text-decoration: none;
    }

   .nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a {
   border-radius: 3px 3px 3px 3px;
   color: white;
    font-weight: bold;
    padding: 6px 15px;
    margin-bottom:2px;

   }

 .navbar .nav li.dropdown .dropdown-toggle .caret, .navbar .nav li.dropdown.open .caret {
  border-bottom-color: white;
  border-top-color: white;
  }


  .navbar .nav li.dropdown.open > .dropdown-toggle, .navbar .nav li.dropdown.active  >  .dropdown-toggle, .navbar .nav li.dropdown.open.active > .dropdown-toggle {
  background-color: transparent;
  color: #211256;
   }
   }

该网站位于

   www.newbridges.co.uk

如果有人能够对此有所了解那就很好了

由于

Answer 1

由于引导响应，导航栏隐藏在960px下。

您可以在媒体查询中覆盖此行为：

@media (max-width: 1024px) {
 .nav-collapse, .nav-collapse.collapse {
   overflow: visible !important;
   height: auto !important;
 }
 .navbar .btn-navbar {
   display:none;
 }

 .dropdown-menu li:hover .sub-menu {
   display: block !important;
   visibility: visible !important;
 }
}

Bootstrap导航栏媒体查询

1 个答案: