Dropdown остается на том же месте - PullRequest
Новая
       19

Dropdown остается на том же месте

0 голосов
/ 19 апреля 2020

проблема

Привет! У меня проблема с моим выпадающим меню. Он всегда остается под первым элементом навигации, даже если он не запущен, но он должен находиться под активированным элементом навигации (элементом навигации, на котором находится указатель мыши). Как я могу как это исправить? Заранее спасибо! 

#nav-list {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.nav-item {
  display: inline;
  padding: 0;
}

.nav-item-text {
  padding: 16px;
  margin: 0;
  font-size: 14px;
  font-family: var(--primary-font-stack);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: context-menu;
  display: inline;
  color: var(--on-background);
  opacity: var(--high-emphasis);
}

.nav-item-link {
  padding: 20px;
  margin: 0;
  font-size: 14px;
  font-family: var(--primary-font-stack);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  display: inline;
  color: var(--on-background);
  opacity: var(--high-emphasis);
}

.nav-item-link:hover {
  opacity: 100%;
  cursor: pointer;
  transition: .2s ease all;
  color: var(--primary);
}

.nav-dropdown {
  display: none;
  opacity: 0;
  position: absolute;
  z-index: 99;
  margin: 3px 0 0 0;
  padding: 15px;
  height: auto;
  min-width: 280px;
  background: var(--background);
  border-radius: 4px;
  border: 2px solid var(--elevation-16dp);
}

.nav-item:hover .nav-dropdown {
  display: block;
  transition: .2s ease all;
  opacity: 100%;
}
<ul id="nav-list">
  <li class="nav-item">
    <p class="nav-item-text">Dropdown Trigger</p>
    <ul class="nav-dropdown">
      <li class="nav-drpdwn-item">
        <p class="nav-drpdwn-item-title">Title A 1</p>
      </li>
      <a class="nav-drpdwn-item-link" href="#">
        <li class="nav-drpdwn-item">Link</li>
      </a>
      <a class="nav-drpdwn-item-link" href="#">
        <li class="nav-drpdwn-item">Link</li>
      </a>
      <hr class="nav-drpdwn-hl">
      <li class="nav-drpdwn-item">
        <p class="nav-drpdwn-item-title">Title</p>
      </li>
      <a class="nav-drpdwn-item-link" href="#">
        <li class="nav-drpdwn-item">Link</li>
      </a>
    </ul>
  </li>
  <li class="nav-item">
    <p class="nav-item-text">Dropdown Trigger</p>
    <ul class="nav-dropdown">
      <li class="nav-drpdwn-item">
        <p class="nav-drpdwn-item-title">Title B 2</p>
      </li>
      <a class="nav-drpdwn-item-link" href="#">
        <li class="nav-drpdwn-item">Link</li>
      </a>
      <a class="nav-drpdwn-item-link" href="#">
        <li class="nav-drpdwn-item">Link</li>
      </a>
      <hr class="nav-drpdwn-hl">
      <li class="nav-drpdwn-item">
        <p class="nav-drpdwn-item-title">Title</p>
      </li>
      <a class="nav-drpdwn-item-link" href="#">
        <li class="nav-drpdwn-item">Link</li>
      </a>
    </ul>
  </li>
</ul>

1 Ответ

0 голосов
/ 19 апреля 2020

Вы должны добавить это css к своему коду: 

<style>
    #nav-list > li {
        position:relative;
    }
    #nav-list .nav-dropdown {
        left: 0;
    }
</style>

надеюсь, это хорошо для вас.

...