css - Twitter Bootstrap 下拉菜单位于内容下方，我找不到解决方案

Question

我遇到了一个非常大的问题，我找不到解决办法。这是问题所在:

我在使用 drupal 7 和 twitter bootstrap 下拉菜单创建的网站上工作。该菜单在我的浏览器(Chrome 和 Firefox)以及 Windows 和 Android 手机上运行良好。但是当我在黑莓或 iPhone 上查看菜单时，下拉菜单会被内容隐藏。

我搜索了很长时间的解决方案并测试了许多不同的解决方案(例如 these )但没有任何效果。

您可以在此处查看问题的屏幕截图:http://imgur.com/IAgGtRs

<header id="header" class="header" role="header">

    <div class="container">
        ::before
        <nav class="navbar navbar-default" role="navigation">
            ::before
            <!--

             Brand and toggle get grouped for better mobile di…

            -->
            <div class="navbar-header">
                ::before
                <button class="navbar-toggle" data-target="#navbar-collapse" data-toggle="collapse" type="button"></button>

    <a id="logo" class="navbar-brand" href="/"></a>
    ::after

</div>
<!--

 /.navbar-header 

-->

<!--

 Collect the nav links, forms, and other content f…

-->

<div id="navbar-collapse" class="navbar-collapse collapse in" style="">

    ::before
    <ul id="main-menu" class="menu nav navbar-nav">
        ::before
        <li class="first leaf menu-link-radwanderwege"></li>
        <li class="expanded dropdown menu-link-unterkünfte radix-dropdown-processed">

    <span class="dropdown-toggle nolink" data-target="#" data-toggle="dropdown" title=""></span>

    <ul class="dropdown-menu">
        <li class="first leaf menu-link-aktuelle-news"></li>
        <li class="last leaf menu-link-hotels"></li>
    </ul>
    ::after

</li>
<li class="expanded dropdown menu-link-mobilität radix-dropdown-processed"></li>

<li class="expanded dropdown menu-link-touristeninformationen radix-dropdown-processed open"></li>

<li class="expanded dropdown menu-link-reisen radix-dropdown-processed"></li>

<li class="last expanded dropdown menu-link-e-autos-und-fahrräder radix-dropdown-processed"></li>

                    ::after
                </ul>
                ::after
            </div>
            <!--

             /.navbar-collapse 

            -->
            ::after
        </nav>
        <!--

         /.navbar 

        -->
        ::after
    </div>
    <!--

     /.container 

    -->

</header>
<div id="main-wrapper">

    <div id="main" class="main">
        <div class="container"></div>
        <div id="content" class="container">
            ::before
            <div class="region region-content">
                <div id="block-easy-breadcrumb-easy-breadcrumb" class="block block-easy-breadcrumb"></div>
                <div id="block-system-main" class="block block-system">
                    <div class="content">
                        <div class="panel-display panel-1col clearfix">
                            ::before
                            <div class="panel-panel panel-col">
                                <div>
                                    <div class="panel-pane pane-node">
                                        <div class="pane-content">
                                            <div class="ds-1col node node-suchmaske node-promoted node-teaser view-mode-teaser clearfix" typeof="sioc:Item foaf:Document" about="/node/14663"></div>

Answer 1

只需将此添加到您的 css 的末尾:

#main-menu {
    z-index:999999;
}