2012-07-26 31 views
1

我有我的下拉菜单样式为小型设备/屏幕尺寸由媒体查询,当导航栏在uts全屏模式我有下拉菜单和一些下拉菜单。在全屏模式下,这一切都可以正常工作,但是当我在更小的设备/屏幕尺寸下浏览导航栏时,子下拉菜单不会出现?有谁知道我错过了什么让这些出现。Bootstrap导航栏媒体查询

引导超越控制和媒体查询

 /* 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 

如果任何人都可以提供一些线索这光,将是巨大

感谢

回答

3

您的导航栏由于引导响应,它隐藏在960像素以下。

您可以在媒体查询覆盖此行为:再次

@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; 
} 
} 
+0

嘿baptme,谢谢,对不起,我觉得我有必要解释一下。在全屏模式下,点击新闻下拉菜单并将鼠标悬停在tynewydd上,您会看到另一个下拉菜单。我希望在响应模式下实现的是在插入新闻后点击该按钮,然后点击以显示 – Richlewis 2012-07-26 19:03:50

+0

下的子菜单,任何帮助表示赞赏 – Richlewis 2012-07-26 19:04:21

+0

@Richlewis您可以使用2级下拉菜单,但这可能会非常复杂。第一级下拉和第二级悬停可能会更容易。 – baptme 2012-07-26 20:42:55