Как позиционировать выпадающий список чтобы он не выходил за установленные приделы?

Question

[vasIvas]

Забегая немного вперед в своих "упражнениях css" хочу узнать можно ли позиционировать выпадающее меню с помощью только одного css. Представьте что есть установленная ширина 800px и последний пункт меню прижат полностью вправо. И когда я по нему кликаю выпадающий список выходит за пределы 800px. Можно этого избежать только с помощью css? И если да, то хоть на словах объясните как.

Answer 1

[Николай Шабалин]

На css такое делать не желательно.
Но если ради эксперимента, вы можете через последний пункт меню, поменять позиционирование выпадающего списка.

У вас наверняка выпадающий список выглядит вот так. Ну т.е. "прицепляется" к пункту меню слева сверху.

CSS

.subList {
  ...
  position: absolute;
  top: 0;
  left: 0;
  ...
}

Вот вам надо, чтобы у последнего пункта меню выпадабщий список "прицепился" к правой стороне.

CSS

.items:last-child {
  .subList {
    right: 0;
  }
}

Comments

[vasIvas]

А почему нежелательно?

[Николай Шабалин]

vasIvas: Тут дело уже в будущем, если вам понадобится, к примеру, чтобы из предпоследнего пункта такое же поведение было, то не ясно когда надо, что бы он прижимался вправо, а когда не надо. Может быть разный по ширине контент в выпадающем списке. На одном экране нормально выглядит, на поуже уже надо вправо прибивать выпадающий список. В общем может быть столько условий, что CSS не справится. Логику лучше на JS делать уже.

Answer 2

[Yaroslav Lyzlov]

max-width:800px;

Comments

[Николай Шабалин]

Что max-width:800px; ? Как это должно помочь?

[Yaroslav Lyzlov]

Если я верно понял вопрос, то автор спросил, как избежать того, что блок растягивается при контенте больше блока. Исходя из этого я ответил.

[Николай Шабалин]

Yaroslav Lyzlov: "Представьте что есть установленная ширина 800px и последний пункт меню прижат полностью вправо. И когда я по нему кликаю выпадающий список выходит за пределы 800px. "

Проблема в выпадающем списке последнего пункта.

[vasIvas]

Николай Шабалин: именно в выпадающем списке!