2

Есть всплывающее меню, которое появляется при наведении на кнопку вызова, причем оно появляется и из скрытой области за пределами кнопки ее вызывающей. Интересует: как сделать так, чтобы меню появлялась только в рамках наведения на кнопку, причем условие вверху

.sub-menu {
      overflow: hidden;
      opacity: 0;
    } 

не убирать (нужно переопределить файл стилей ее задающий) ? Ссылка на фидл

.sub-menu {
  overflow: hidden;
  opacity: 0;
}
ul {
  list-style: none;
}
.menu {
  overflow: hidden;
  opacity: 0;
}
.button:hover .menu,
.button:hover .sub-menu {
  overflow: visible;
  opacity: 1;
}
.item {
  display: block;
}
<div class="button"><span>Кнопка</span>
  <ul class="menu">
    <li class="item">
      <a>ссылка 1</a>
      <ul class="sub-menu">
        <li><a>ссылка 1-1</a>
        </li>
        <li><a>ссылка 1-2</a>
        </li>
        <li><a>ссылка 1-3</a>
        </li>
      </ul>
    </li>
    <li class="item"><a>ссылка 2</a>
    </li>
    <li class="item"><a>ссылка 3</a>
    </li>
  </ul>
</div>

1 ответ 1

4

Менять высоту меню и подменю между нулём и auto:

.menu, .sub-menu {
  height: 0;
}
.button:hover .menu, .button:hover .sub-menu {
  height: auto;
}

Получится:

.sub-menu {
  overflow: hidden;
  opacity: 0;
}
ul {
  list-style: none;
}
.menu {
  overflow: hidden;
  opacity: 0;
}
.menu, 
.sub-menu {
  height: 0;
}
.button:hover .menu,
.button:hover .sub-menu {
  overflow: visible;
  opacity: 1;
  height: auto;
}
.item {
  display: block;
}
<div class="button"><span>Кнопка</span>
  <ul class="menu">
    <li class="item">
      <a>ссылка 1</a>
      <ul class="sub-menu">
        <li><a>ссылка 1-1</a>
        </li>
        <li><a>ссылка 1-2</a>
        </li>
        <li><a>ссылка 1-3</a>
        </li>
      </ul>
    </li>
    <li class="item"><a>ссылка 2</a>
    </li>
    <li class="item"><a>ссылка 3</a>
    </li>
  </ul>
</div>

https://jsfiddle.net/glebkema/fdvzwhvo/

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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