子div的位置：相对引起问题

Question

我有一个下拉菜单，如下：

它可以在其他页面上正常工作，但是在此页面上，有一个c3图表，其类定义中包含position: relative;，而且我不知道如何更改它（它是直接从其api中加载的）。如果将鼠标悬停在如此低的水平以至图表的div，则导致下拉菜单消失。

如果我在chrome开发人员控制台中将其从“相对”更改为“静态”，则效果很好。我的下拉.css出问题了吗？还是有一种方法可以简单地覆盖位置：相对？

  li a, .dropbtn {
    color: white;
  }

  li a:hover, .dropdown:hover .dropbtn {
    background-color: #333;
  }

  li.dropdown {
    display: block;
    float: right;
  }
  li.dropdown:hover {
    display: block;
    float: right;
  }
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  }

  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }

  .dropdown-content a:hover {background-color: #f1f1f1}

  .dropdown:hover .dropdown-content {
    display: block;
  }

Answer 1

尝试将z-index: 9999添加到您的.dropdown-content类中。那有什么作用吗？

此外，将position: relative添加到您的li中。您需要该下拉列表来知道其附加的父对象（因为它是position: absolute）。执行此操作时，可能需要根据宽度将top和left调整为top: 100%; left: 0。