Bootstrap下拉菜单出现在其他DIV的后面

时间:2016-04-17 08:49:11

标签: html css twitter-bootstrap

我使用的是Bootstrap v3.3.6 所以我正在使用他们的下拉菜单'在我的'顶盒' div显示子菜单。 但出于某种原因'下拉菜单'正在出现在标题品牌' DIV在我的网站上。 我在我的CSS中添加了z-index,但似乎无法做任何事情,请帮忙。

以下是我的项目网址:Click Here

<header id="header">

    <!-- BEGIN TOP BAR -->
    <div class="top-box animatedq fadeInDownq">
        <div class="left-bar">
            <ul class="list-inline top-contact-info">
                <li><i class="fa fa-mobile-phone"></i> 24X7 Contact : +91 9830556230</li>
            </ul>
        </div>
        <div class="right-bar">
            <ul class="list-inline top-menu-items" role="navigation">
                <li><a href="#"><i class="fa fa-briefcase"></i> Create Wallet</a></li>
                <li><a href="#"><i class="fa fa-sign-in"></i> User Login</a></li>
                <li><a href="#"><i class="fa fa-sign-in"></i> Agent Login</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                    <ul class="dropdown-menu submenu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                  </li>
            </ul>
        </div>
    </div>
    <!-- END TOP BAR -->

    <!-- BEGIN BRAND(COMPANY NAME & LOGO) -->
    <div class="header-brand">
        <div class="logo">
            <a href="index.html"><img src="assets/images/logo.png" alt="Logo"></a>
        </div>
        <div class="social-icons">
            <ul class="icons">
                <li><a href="#" title="Facebook"><i class="fa fa-facebook"></i></a></li>
                <li><a href="#" title="Twitter"><i class="fa fa-twitter"></i></a></li>
                <li><a href="#" title="google Plus"><i class="fa fa-google-plus"></i></a></li>
                <li><a href="#" title="Youtube"><i class="fa fa-youtube"></i></a></li>
                <li><a href="#" title="Skype"><i class="fa fa-skype"></i></a></li>
                <li><a href="#" title="Vimeo"><i class="fa fa-vimeo"></i></a></li>
                <li><a href="#" title="Instagram"><i class="fa fa-instagram"></i></a></li>
            </ul>
        </div>
    </div>
    <!-- END BRAND(COMPANY NAME & LOGO) -->
</header>

CSS代码

.top-box .submenu {
    z-index: 9999999999 !important;
    border-radius: 0px;
}

1 个答案:

答案 0 :(得分:7)

如上所述,从static_cast移除nullptr以停止裁剪内容并添加类overflow:hidden以清除内部div的浮动。

.top-box