0

Есть навигационная панель. Суть задачи такая - при наведении на ссылку в навигационной панели должен выезжать блок - этого я добился, но как сделать так, чтобы блок не исчезал и можно было водить по нему мышкой и нажимать внутренние ссылки?

.header-menu-sub {
  position: absolute;
  width: 788px;
  height: 200px;
  display: none;
}

a:hover+.header-menu-sub {
  background-color: white;
  display: block;
}
<nav class="navbar navbar-expand-lg header-menu">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerMenu" aria-controls="navbarTogglerMenu" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
  <div class="collapse navbar-collapse" id="navbarTogglerMenu">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item has-sub">
        <a class="nav-link " href="#">О компании</a>
        <!--Скрытый блок, который показывается при наведении-->
        <div class="header-menu-sub">
          <div class="header-menu-title">О компании</div>
          <div class="row">
            <div class="col-md-4">Меню</div>
            <div class="col-md-8">Контент</div>
          </div>
        </div>
        <!--Конец скрытого блока-->
      </li>

    </ul>
  </div>
  </nav

Решено.

.header-menu-sub {
  	position: absolute;
  	width: 788px;
  	height: 200px;
  	opacity:0;
  	-webkit-transition: opacity 0.5s ease-out 0.1s;
    -moz-transition: opacity 0.5s ease-out 0.1s;
    -o-transition: opacity 0.5s ease-out 0.1s;
    transition: opacity 0.5s ease-out 0.1s;
    z-index: 2;
    visibility: hidden;
}

a:hover+.header-menu-sub, .header-menu-sub:hover {
  background-color: white;
  opacity:1;
  visibility: visible;
}

1 ответ 1

0

Вам нужно добавить hover для самого меню

.header-menu-sub:hover { background-color: white; display: block; }

1
  • И еще добавить к .header-menu-sub{ visibility: hidden;}, а к a:hover+.header-menu-sub, .header-menu-sub:hover {visibility: visible;}
    – igrshrn
    Commented 5 июн. 2018 в 8:21

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.