Question

我创建了一个bootstrap响应菜单和另一个subnavigaiton浮动精灵菜单。这都是在WordPress和Ultimatum Framework中创建的。问题是当浏览器窗口缩小并且引导菜单激活下拉菜单时，在sprited图像和较低的嵌入式iframe YouTube视频下。有没有办法修复下拉菜单，使其高于所有这些元素。

以下是我用于bootstrap下拉菜单的代码：

.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

查看测试版网站

我感谢大家的时间和考虑。

Answer 1

我可以通过将以下代码添加到我的css中来引导Bootstrap折叠菜单：

.nav-collapse, .nav-collapse.collapse {
    background-color: #f7f7f7;
    z-index: 999 !important;
}

现在它正在显示其他元素上方的菜单。这可能不是最好的解决方案，但它适用于我。

谢谢。

浮动精灵导航下的Bootstrap响应式菜单

1 个答案: