使导航下拉列表显示在所有其他div之上(Make nav dropdown show above all other divs)

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

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

这是一个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>  <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>  <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>

I have a page I'm working on where currently I have 2 items. Item 1 is a flexnav jQuery navigation menu with a dropdown. Item 2 is a slick jQuery div scroller. I am trying to position the slick scroller just below the flexnav menu. The problem I'm running into though is when you hover over one of the menu items the dropdown for the sub menu is covered up by the slick scroller divs. This only seems to be happening with a screen larger than 800px as the flexnav plugin changes to a mobile friendly navigation menu on small screens.

I have tried changing the css position setting of both items but I just can't seem to figure out how to make the dropdown menus appear above the slick divs. Does anyone know what I'm doing wrong here or have any suggestions on how I could change things around to achieve what I am looking for?

Here is a example JSFiddle

The code I am using:

<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>  <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>  <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>

最满意答案

您只需要添加两行CSS

示例小提琴

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导航中将不起作用。

You only need to add two lines of 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 */ }

The position: relative allows for the element to have a z-index applied (an element must not be statically positioned, relative positioning will allow the element to display in normal document flow without having a static positioning).

The z-index: 1 provides a separate stacking context for the nav. Otherwise, because it precedes your carousel in document flow, will necessarily display beneath it when overlapped without a z-index given.

Stacking contexts apply generally only to elements which sit at the same hierarchical depth. So putting the flyout in your nav with a higher z-indexwon't work.

更多推荐