Детский div, имеющий положение: относительные вызывающие проблемы - PullRequest
Новая
       15

Детский div, имеющий положение: относительные вызывающие проблемы

0 голосов
/ 14 февраля 2019

У меня есть выпадающее меню, которое выглядит следующим образом:

enter image description here

Работает на других страницах просто отлично, но на этой странице есть 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;
  }

enter image description here enter image description here

1 Ответ

0 голосов
/ 14 февраля 2019

Попробуйте добавить z-index: 9999 к вашему .dropdown-content классу.Это что-нибудь делает?

Кроме того, добавьте position: relative к вашему li.Вам нужно раскрывающееся меню, чтобы узнать, к какому родителю он прикреплен (поскольку он position: absolute).Когда вы сделаете это, вам может потребоваться настроить top и left, вероятно, на top: 100%; left: 0 в зависимости от вашей ширины.

...