Implementing Global horizontal navigation in SP Masterpage css issue

Question

I found a sub-navigation menu that I was able to tweak and make it dynamic in SharePoint. It functions exactly as you see here except in SharePoint, the navigation is being populated with data from two lists. In SharePoint when I hover over any of the drop-down in the navigation menu, nothing happens. In the css, when I change line 45 to position: relative, the menu in the drop-down appears when hovered over but it pushes everything below it down instead of extending over it. I thought the problem was the z-index but it wasn't. Any ideas of what could be the issue and how to fix?

Answer 1

Hard to tell what you mean since the provided example seems fine and you say that the one in SharePoint works the same? But reading between the lines I think I maybe know.

In your css you have .dropdown-content{position:absolute;} but the question is always absolute with respect to what? This explains how absolute positioning works.

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

Basically I translate this to be, "It looks through the ancestor/parent elements until it finds an element that has a position value of other than static and if it doesn't find any it used the body tag."

I think that you would want to position them absolutely with respect to .dropdown elements that you hover over. In the case of your codepen example there is no position attribute on .dropdown (so it has the default value of static) and therefore is using the body as the reference. This works out fine in your sample because your nav is at 0 in the body. But that isn't the case in SharePoint -- you've got the suite bar and probably other things....

So my guess is that the .dropdown-content elements are showing on hover, but they are positioned somewhere that you can't see them.

I think you need to add position:relative to the parent containers. But I'm not sure if that is the only fix. I'm not quite clear on why there are so many things that also have overflow hidden.