Написал небольшое меню с выпадающим списком для наглядности, интересует 3 вопроса:
- Как сделать, чтобы выпадающий список появлялся НАД а не ПОД родителем?
- Как сделать, чтобы выпадающий список начинался от правого края родителя и продолжался в левую сторону?
- Как сделать, чтобы при отсутствие места с права, выпадающий список занимал свободное место с лева?
Картинка для вопроса 3:
* {
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>