Question

我有一个导航菜单，它显示悬停时的子导航。问题是当我将鼠标悬停在子导航上时，子导航消失了。

如果我删除子导航的z-index，则可以解决悬停问题，但是现在子导航位于主导航上方。

如何解决此问题，以便subnav位于主导航下方并且可以悬停。

Codepen示例

Answer 1

使用css悬停的超级基本示例

关键点是

subnav包含在导航中
subnav为int*，直到导航具有display: none（如果要匹配当前的实现，则改为位置和动画）

https://jsfiddle.net/7mb0szLk/1/

Answer 2

我找到了适合自己目的的解决方案。

我为subnav设置了以下样式：

.subnav-block {
  position: absolute;
  top: 80px;
  width: 100% !important;
  padding: 20px 0 !important;
  visibility: hidden;
  height: 0;
  background: gray;
/*   z-index:-1; */
}

我需要消除z-index，因为它的负索引使我无法与其中的任何元素进行交互。另外，我需要将其放置在绝对位置，以便它不占用任何空间，因此也不能将其下的内容向下推。

我添加了visibility:hidden和height:0，以便可以为这些属性设置动画，并实现滑动/下拉效果。

Codepen

导航子菜单悬停问题

2 个答案: