0
我創建了一個引導響應菜單和另一個子精靈浮動精靈菜單。這一切都是在WordPress和Ultimatum Framework中創建的。問題在於瀏覽器窗口縮小的時候，引導菜單激活了下拉菜單，該菜單位於sprite圖像和較低的嵌入式iframe YouTube視頻之下。有沒有辦法解決下拉菜單，以便它超越所有這些元素。浮動精靈導航下的自舉響應菜單
這裏是我使用的自舉下拉菜單代碼：
.navbar .nav li.dropdown.open > .dropdown-toggle, .navbar .nav li.dropdown.active > .dropdown-toggle, .navbar .nav li.dropdown.open.active > .dropdown-toggle {
background-color: #9c8aa5;
color: #fff !important;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.navbar .nav > li > .dropdown-menu:after {
border-bottom: 6px solid #ffffff !important;
}
.dropdown-menu {
background-color: #fff !important;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-submenu:hover > a, .dropdown-submenu:focus > a {
text-decoration: none;
color: rgb(255, 255, 255);
background-color: #9C8AA5 !important;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-submenu:hover > a, .dropdown-submenu:focus > a {
background-color: #9C8AA5;
background-image: linear-gradient(to bottom, #9C8AA5, #9C8AA5);
background-repeat: repeat-x;
color: #FFFFFF;
text-decoration: none;
}
.dropdown-menu > li > a {
clear: both;
color: #333333;
display: block;
font-weight: normal;
line-height: 20px;
padding: 3px 20px;
white-space: nowrap;
}
.dropdown-menu > li > a {
clear: both;
color: #333333;
display: block;
font-weight: normal;
line-height: 20px;
padding: 3px 20px;
white-space: nowrap;
}
.dropdown-menu .current_page_ancestor > a > span, .current-menu-item > a {
color: white!important;
}
.dropdown-menu li.current-menu-item, .dropdown-menu li.current-menu-ancestor {
background-color: #ffffff;
}
.dropdown-menu ul li.current-menu-item > a {
color: #FFFFFF;
}
這裏是我使用的浮動精靈導航代碼：
.micrositescontainer {
background: url('img/microsites_main_bkg.jpg');
}
.micrositestopnav .ultimatum-nav {
float: right;
position: relative;
left: -50%;
text-align: left;
}
.micrositestopnav .horizontal-menu ul li {
border: none;
padding: 0px;
list-style: none;
position: relative;
left: 50%;
display: block;
}
.micrositestopnav .menu-item-8449 a {
background-image: url("img/micrositestopnav.png");
background-position: 0 0;
display: block;
height: 125px;
outline: medium none;
padding: 0;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
width: 200px;
}
.micrositestopnav li.menu-item-8449.menu-item-object-page:hover > a, .micrositestopnav ul ul:hover > a, .micrositestopnav li.menu-item-8449.menu-item-object-page a:focus {
background-image: url("img/micrositestopnav.png");
background-position: 0 -125px;
display: block;
height: 125px;
outline: medium none;
padding: 0;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
width: 200px;
}
.micrositestopnav li.current-menu-item.menu-item-8449 > a, .micrositestopnav li.current-menu-ancestor.menu-item-8449 > a, .micrositestopnav li.current_page_item.menu-item-8449 > a, .micrositestopnav li.current_page_ancestor.menu-item-8449 > a {
background-image: url("img/micrositestopnav.png");
background-position: 0 -125px;
}
.micrositestopnav .menu-item-8453 a {
background-image: url("img/micrositestopnav.png");
background-position: -200px 0px;
display: block;
height: 125px;
outline: medium none;
padding: 0;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
width: 200px;
}
.micrositestopnav li.menu-item-8453.menu-item-object-page:hover > a, .micrositestopnav ul ul:hover > a, .micrositestopnav li.menu-item-8453.menu-item-object-page a:focus {
background-image: url("img/micrositestopnav.png");
background-position: -200px -125px;
display: block;
height: 125px;
outline: medium none;
padding: 0;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
width: 200px;
}
.micrositestopnav li.current-menu-item.menu-item-8453 > a, .micrositestopnav li.current-menu-ancestor.menu-item-8453 > a, .micrositestopnav li.current_page_item.menu-item-8453 > a, .micrositestopnav li.current_page_ancestor.menu-item-8453 > a {
background-image: url("img/micrositestopnav.png");
background-position: -200px -125px;
}
.micrositestopnav .menu-item-8456 a {
background-image: url("img/micrositestopnav.png");
background-position: -400px 0;
display: block;
height: 125px;
outline: medium none;
padding: 0;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
width: 200px;
}
.micrositestopnav li.menu-item-8456.menu-item-object-page:hover > a, .micrositestopnav ul ul:hover > a, .micrositestopnav li.menu-item-8456.menu-item-object-page a:focus {
background-image: url("img/micrositestopnav.png");
background-position: -400px -125px;
display: block;
height: 125px;
outline: medium none;
padding: 0;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
width: 200px;
}
.micrositestopnav li.current-menu-item.menu-item-8456 > a, .micrositestopnav li.current-menu-ancestor.menu-item-8450 > a, .micrositestopnav li.current_page_item.menu-item-8456 > a, .micrositestopnav li.current_page_ancestor.menu-item-8456 > a {
background-image: url("img/micrositestopnav.png");
background-position: -400px -125px;
}
.micrositestopnav .menu-item-8481 a {
background-image: url("img/micrositestopnav.png");
background-position: -600px 0;
display: block;
height: 125px;
outline: medium none;
padding: 0;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
width: 200px;
}
.micrositestopnav li.menu-item-8481.menu-item-object-page:hover > a, .micrositestopnav ul ul:hover > a, .micrositestopnav li.menu-item-8481.menu-item-object-page a:focus {
background-image: url("img/micrositestopnav.png");
background-position: -600px -125px;
display: block;
height: 125px;
outline: medium none;
padding: 0;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
width: 200px;
}
.micrositestopnav li.current-menu-item.menu-item-8481 > a, .micrositestopnav li.current-menu-ancestor.menu-item-8481 > a, .micrositestopnav li.current_page_item.menu-item-8481 > a, .micrositestopnav li.current_page_ancestor.menu-item-8481 > a {
background-image: url("img/micrositestopnav.png");
background-position: -600px -125px;
}
測試網站可以被視爲在http://betabooks.matthewflint.com
我感謝大家的時間和考慮。