2

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

  1. Как сделать, чтобы выпадающий список появлялся НАД а не ПОД родителем?
  2. Как сделать, чтобы выпадающий список начинался от правого края родителя и продолжался в левую сторону?
  3. Как сделать, чтобы при отсутствие места с права, выпадающий список занимал свободное место с лева?

Картинка для вопроса 3: image

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.list {
  list-style-type: none;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
  -webkit-padding-start: 0;
}

.list.parent {
  display: flex;
  flex-wrap: wrap;
}

.list.parent>.item>a {
  display: block;
  padding: 10px;
  background: lightgray;
}

.list.dropdown {
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  background: greenyellow;
}

.list.dropdown>.item>a {
  display: block;
  padding: 10px;
}
<ul class="list parent">
  <li class="item"><a href="#">Item</a></li>
  <li class="item item-dropdown">
    <a href="#">Item</a>
    <ul class="list dropdown">
      <li class="item"><a href="#">Item child 1</a></li>
      <li class="item"><a href="#">Item child 2</a></li>
      <li class="item"><a href="#">Item child 3</a></li>
      <li class="item"><a href="#">Item child 4</a></li>
      <li class="item"><a href="#">Item child 5</a></li>
      <li class="item"><a href="#">Item child 6</a></li>
    </ul>
  </li>
  <li class="item"><a href="#">Item</a></li>
  <li class="item"><a href="#">Item</a></li>
  <li class="item"><a href="#">Item</a></li>
  <li class="item"><a href="#">Item</a></li>
</ul>

1 ответ 1

1
  1. Элементу ul.list.parent задать position: relative а ul.list.dropdown- position: absolute и bottom: 100%;

  2. Элементу ul.list.dropdown задать right: 0;, при этом у элемента ul.parent .item НЕ должно быть задано свойство position, иначе ul.dropdown будет позиционироваться относительно этого элемента, а не относительно всего меню

  3. Тут немного по сложнее, ведь выпадающее меню спозиционированно абсолютно... Можно задать width: 100%, тогда выпадающее меню будет такой же ширины, как и меню первого уровня. Можно задать фиксированную ширину, но если у вас адаптив, то этот вариант тоже не подойдет.

Ваш ответ

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

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