Можно ли с помощью одного CSS сделать меню с горизонтальным скролом и перемещаемыми выпадающими списками?
Реально ли используя один лишь CSS сделать меню с горизонтальной прокруткой (т.е. чтобы на мобильных устройствах разделы меню уходили за край экрана и скролились влево) и чтобы разделы меню имели выпадающие списки, которые бы в открытом виде скролились бы вслед за меню? Т.е. мы нажимаем на раздел, выпадает меню, далее скролим влево и нажатый раздел вместе с открытым меню уезжает влево. Обычно выпадающие меню реализуют через position: absolute, но тогда открытое меню останется зафиксированным на одном месте и не будет перетаскиваться вслед за родителем.
Это почему это absolute не будет привязан к родителю, а будет зафиксирован относительно экрана? Вы путаете с fixed, а вот последний используют как раз для того, чтобы вывести выпадающие пункты (которые на absolute) за пределы прокручивающегося контейнера, ибо у него задан overflow, который обрезает это самое выпадающее меню, а так, конечно, всё было бы хорошо. Иллюстрация проблемы:
Именно поэтому подобные выпадающие списки делают на fixed в комбинации с JS для позиционирования по местоположению нужного элемента относительно окна. А ещё часто их контент генерируют вне самого меню и динамически. Иными словами, нормально и только на CSS это не решить. Более того, для тача нужны свои обработчики, чтобы такие выпадающие списки работали хорошо и удобно, на :hover такое лучше не делать. За сим — привет, JS.
Рустам Байназаров, у меня в коде absolute ведёт себя именно так, как я написал https://codepen.io/ShadowOfBeing/pen/wvgNQma. Уменьшите ширину экрана и пролистайте меню вбок, выпадающее меню будет раскрываться на одном и том же месте, независимо от положения родителя.
Soul1 если Вы хотите чтобы меню привязывалось к родителю - родителю нужно добавить position: relative. И внезапно.. пабам! выпадающее меню будет срезано overflow, т.к. меню уже окажется внутри контейнера. То как у вас ведет себя меню говорит о том, что стоит подтянуть CSS
Soul1, потому что у родителя нет position: relative, что очевидно, поэтому и привязывается к ближайшему предку c relative или к окну, если оных нет. Но стоит этому свойству появиться, всё будет обрезаться из-за overflow. Кроме того, у самого выпадающего меню нет координат. Ваш вариант — вывод меню за пределы контейнера и позиционирование с помощью JS.
Простой
