Example fiddle

Question

我有一个我正在处理的页面，目前我有2个项目。第1项是带有下拉列表的flexnav jQuery导航菜单。第2项是一个漂亮的jQuery div滚动条。我试图将光滑的滚动条放在flexnav菜单下面。我遇到的问题是当你将鼠标悬停在其中一个菜单项上时，子菜单的下拉列表被光滑的滚动条div所覆盖。这似乎仅在屏幕大于800px时发生，因为flexnav插件在小屏幕上变为移动友好的导航菜单。

我已经尝试更改两个项目的CSS位置设置，但我似乎无法弄清楚如何使下拉菜单显示在光滑的div上方。有谁知道我在这里做错了什么或者有什么建议我可以改变一切来实现我想要的东西？

Here is a example JSFiddle

我正在使用的代码：

<header>
    <nav style="background-color: #FAD10E; height:50px">
    <div class="menu-button">Mobile Menu</div>
        <ul class="flexnav" data-breakpoint="800">
            <li><a href="">Home</a></li>
            <li><a href="">Stuff</a>

            <!-- THIS DROPDOWN IS COVERED BY THE AUTOPLAY DIV -->
              <ul>
                <li><a href="">Stuff 1</a></li>
                <li><a href="">Stuff 2</a></li>
                <li><a href="">Stuff 3</a></li>
                <li><a href="">Stuff 4</a></li>
                <li><a href="">Stuff 5</a></li>
                <li><a href="">Stuff 6</a></li>
              </ul>
            </li>
            <li><a href="/">Stuff 2</a></li>
            <li><a href="">Stuff 3</a></li>
            <li><a href="">Stuff 4</a></li>
            <li><a href="">Stuff 5</a></li>
        </ul>
    </nav>
</header>


<div>
    <!-- THIS AUTOPLAY DIV SHOWS ON TOP OF THE MENU DROPDOWN ITEMS -->
    <div class="autoplay">
        <div><img src="http://www.affordablehomecare.org/assets/images/fade/happy-home-care-client.jpg"></div>
        <div><img src="http://www.affordablehomecare.org/assets/images/fade/helping-hands-home-care.jpg"></div>
        <div><img src="http://www.affordablehomecare.org/assets/images/fade/loving-home-care-client.jpg"></div>
    </div>
</div>

Answer 1

您只需要添加两行CSS

Example fiddle

<强> CSS

.flexnav{
    -webkit-padding-start: 0px;
    -webkit-margin-before: 0px;
    -webkit-margin-after: 0px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    width:90%;
    position: relative; /* <-- Added */
    z-index: 1; /* <-- Added */
}

position: relative允许元素应用z-index（元素不能静态定位，相对定位将允许元素在正常文档流中显示而不需要static定位）。

z-index: 1为导航提供单独的堆叠上下文。否则，因为它在文档流程中位于您的轮播之前，当重叠而没有给出z-index时，它必然会显示在它下面。

堆叠上下文通常仅将应用于位于相同层次深度的元素。因此，将弹出按钮放在导航中，z-index更高的成功。

使导航下拉菜单显示在所有其他div之上

1 个答案:

Example fiddle