Анимированный блок срабатывает после закрытия

Question

.header-menu {
  background: #fff;
  width: 100%;
  height: 70px;
  position: relative;
}

.header-menu:after {
  content: '';
  clear: both;
  display: block;
}

menu {
  width: 1000px;
  margin: 0 auto;
}

nav>ul {
  display: flex;
  justify-content: center;
}

nav>ul>li {
  margin-top: 23px;
  list-style: none;
  margin-right: 15px;
  padding-bottom: 23px;
  float: left;
  color: #000;
  font-size: 17px;
  text-transform: uppercase;
}

nav>ul>li>ul.team-menu>li>ul>li {
  top: 29px;
  list-style: none;
  transition: all .3s ease;
}

nav li ul {
  opacity: 0;
  visibility: hidden;
  transition-property: opacity, visibility;
}

nav li:hover ul {
  opacity: 1;
  visibility: visible;
}

nav .team-menu {
  z-index: 9999;
  list-style: none;
  width: 100%;
  position: absolute;
  top: 100%;
  left: 0;
  height: 300px;
  background: #fff;
  overflow: hidden;
  padding-top: 30px;
  box-shadow: 0px 8px 35px rgba(0, 0, 0, 0.1);
  transition: top .3s ease, opacity .3s ease;
}

nav>ul>li.text {
  text-transform: none;
}

nav .text {
  position: relative;
}

nav .text ul {
  z-index: 9999;
  left: 0;
  top: 28px;
  position: absolute;
  background: #fff;
  list-style: none;
  width: 210px;
  box-shadow: 0px 8px 35px rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  transition: top .3s ease, opacity .3s ease;
}

nav .text>ul a {
  padding: 10px 35px;
  font-size: 12px;
  color: #000;
  display: block;
  padding: 0 15px;
  line-height: 34px;
  border-bottom: 1px solid #e8e8e8;
  transition: all .3s ease;
}

nav .text>ul a:hover {
  color: #0cadb7;
}

nav li.text:hover>a {
  color: #0cadb7;
}

nav ul>li.team-title:hover>a {
  color: #0cadb7;
}

.row {
  display: flex;
  justify-content: center;
}

.team-menu-block {
  float: left;
}

.team-menu-block li img {
  display: block;
  width: 70px;
  margin-right: 30px;
  margin-bottom: 30px;
  opacity: 0.70;
  transition: all .3s ease;
}

.team-menu-block li img:hover {
  opacity: 1;
  transition: all .3s ease;
}

<header id="header">
  <div class="header-menu">
    <menu>
      <nav>
        <ul>
          <li><a href="/">Главная</a></li>
          <li class="team-title"><a>Команды</a>
            <ul class="team-menu">
              <li class="row">
                <ul class="team-menu-block">
                  <li>картинки</li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
    </menu>
  </div>
</header>

Возникла проблема с тем, что после закрытия выпадающего блока на него можно навестись со страницы

скриншот приложил

https://www.cyberforum.ru/attachments/1118961d1583419864 - 1 https://www.cyberforum.ru/attachments/1118962d1583419864 - 2

Вопрос заключается в том, что при наведение на "команды" открывается плавно меню, но оно как бы скрывается. Если же чуть ниже меню навести (не на кнопку "команды") то меню все равно открыто будет

Answer 1

Немного подредактировал ваш код:

.header-menu {
  background: #fff;
  width: 100%;
  position: relative;
}

.header-menu:after {
  content: '';
  clear: both;
  display: block;
}

menu {
  margin: 0 auto;
}

nav>ul {
  display: flex;
  justify-content: center;
  margin: 0;
}

nav>ul>li {
  margin-top: 23px;
  list-style: none;
  margin-right: 15px;
  float: left;
  color: #000;
  font-size: 17px;
  text-transform: uppercase;
}

nav>ul>li>ul.team-menu>li>ul>li {
  top: 29px;
  list-style: none;
  transition: all .3s ease;
}

nav li ul {
  opacity: 0;
  visibility: hidden;
  padding-top: 20px;
  transition-property: opacity, visibility;
}

nav li:hover ul {
  opacity: 1;
  visibility: visible;
}

nav .team-menu {
  z-index: 9999;
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 300px;
  background: #fff;
  margin-top: 20px;
  box-shadow: 0px 8px 35px rgba(0, 0, 0, 0.1);
  transition: top .3s ease, opacity .3s ease;
}

nav .team-menu:before {
  content: "";
  display: block;
  position: absolute;
  height: 20px;
  top: -20px;
  left: 0;
  right: 0;
}

nav>ul>li.text {
  text-transform: none;
}

nav .text {
  position: relative;
}

nav .text ul {
  z-index: 9999;
  left: 0;
  top: 28px;
  position: absolute;
  background: #fff;
  list-style: none;
  width: 210px;
  box-shadow: 0px 8px 35px rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  transition: top .3s ease, opacity .3s ease;
}

nav .text>ul a {
  padding: 10px 35px;
  font-size: 12px;
  color: #000;
  display: block;
  padding: 0 15px;
  line-height: 34px;
  border-bottom: 1px solid #e8e8e8;
  transition: all .3s ease;
}

nav .text>ul a:hover {
  color: #0cadb7;
}

nav li.text:hover>a {
  color: #0cadb7;
}

nav ul>li.team-title:hover>a {
  color: #0cadb7;
}

.row {
  display: flex;
  justify-content: center;
}

.team-menu-block {
  float: left;
}

.team-menu-block li img {
  display: block;
  width: 70px;
  margin-right: 30px;
  margin-bottom: 30px;
  opacity: 0.70;
  transition: all .3s ease;
}

.team-menu-block li img:hover {
  opacity: 1;
  transition: all .3s ease;
}

<header id="header">
  <div class="header-menu">
    <menu>
      <nav>
        <ul>
          <li><a href="/">Главная</a></li>
          <li class="team-title"><a>Команды</a>
            <ul class="team-menu">
              <li class="row">
                <ul class="team-menu-block">
                  <li>картинки</li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
    </menu>
  </div>
</header>

БЛОГ НА HUSL

Анимированный блок срабатывает после закрытия

Ответы (1 шт):