html – 使导航下拉列表显示在所有其他div之上

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

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

Here is a example JSFiddle

我正在使用的代码：

<header>    <nav >    <div >Mobile Menu</div>        <ul  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 >        <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>

解决方法 您只需要添加两行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(元素不能静态定位,相对定位将允许元素在正常文档流中显示而无需静态定位).

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

堆叠上下文通常仅适用于位于相同分层深度的元素.因此,使用更高的z-index将d出窗口放在导航中是行不通的.

总结

以上是内存溢出为你收集整理的html – 使导航下拉列表显示在所有其他div之上全部内容，希望文章能够帮你解决html – 使导航下拉列表显示在所有其他div之上所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。