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
如果任何人都可以提供一些線索這光,將是巨大
感謝
嘿baptme,謝謝,對不起,我覺得我有必要解釋一下。在全屏模式下,點擊新聞下拉菜單並將鼠標懸停在tynewydd上,您會看到另一個下拉菜單。我希望在響應模式下實現的是在插入新聞後點擊該按鈕,然後點擊以顯示 – Richlewis 2012-07-26 19:03:50
下的子菜單,任何幫助表示讚賞 – Richlewis 2012-07-26 19:04:21
@Richlewis您可以使用2級下拉菜單,但這可能會非常複雜。第一級下拉和第二級懸停可能會更容易。 – baptme 2012-07-26 20:42:55