Как реализовать выпадающие списки?

approximate solution, ну "аккордеон на js" гуглится за пол минуты.
Так что надеюсь, автор справится.

Как спрятать меню при адаптации?

Максим Фикс,
Стилизация пишется в CSS, разметка в HTML и т.д.
Не стоит делать кашу из проекта на этапе разработки.

Как реализовать выпадающие списки?

Чистый CSS-аккордеон

Только не семантичный.

Как сделать меню столбиком в footer?

Оно у вас и так в столбик.

Элементы списка по умолчанию становятся в столбик, с ними не надо ничего специально делать.

Как спрятать меню при адаптации?

И зачем это делать на js при наличии @media в CSS?

На js нужно обрабатывать клик по кнопке и манипулировать классом (классами), который отвечает за показ блока меню.

Почему не увеличивается расстояние между пунктами меню виджета?

1. Расстояние между пунктами меню регулируется отступами. margin или padding в зависимости от дизайна.

Если отступы задаются ссылке, то дополнительно необходимо задать им display block или inline-block.

2. Старайтесь не использовать id для стилизации, не делайте себе проблем на будущее. Используйте классы. Так вы избавитесь от повторов кода как у вас в примере.

3. line-height правильно задавать коэффициентом без использования единиц измерения. Тогда вы получите зависимость от шрифта, а не от line-height родителя.

Чем можно заменить height: max-content?

Владимир Куракин, у меня явно не пропала.
И хорошо бы озвучивать вопрос полностью, со всем нюансами.

Плавность анимации у вас за счет того, что задается фиксированная высота.
Но анимироваться не будет ни max-content ни auto.

Чем можно заменить height: max-content?

Владимир Куракин, ну так и уберите высоту вообще и stretch у флекса.

Чем можно заменить height: max-content?

Уточните, что вы творите и какого результата нужно добиться?
Вероятно, вообще достаточно убрать height.

Как разместить изображения поверх другого?

для изображения аватара в css файле
z-index: 1

Для анимированной рамки
z-index: 10

Достаточно 0 и 1. Не нужно придумывать лишние слои.

Верстка по сетке на Flex или без сетки?

А макет-то вообще попадает в сетку? ;)

Если да, то как вам удобнее так и верстайте.

Есть ли событие JS чтобы отследить событие ЗАЖАТОЙ движение мыши?

Надим Закиров, да я проверила.

Напишите в поддержку

Есть ли событие JS чтобы отследить событие ЗАЖАТОЙ движение мыши?

Надим Закиров, хм, я тоже не вижу.
При этом в предыдущем ответе и моем комментарии ссылки ровно на этот же ресурс без всяких сложностей.
Единственное что я вижу, это что вы дате ссылку на устаревшую по мнению источника статью, но не понятно какое дело до этого Тостеру.

Есть ли событие JS чтобы отследить событие ЗАЖАТОЙ движение мыши?

Зачем вы заменяете ссылки на действительно качественные ресурсы?

Есть ли событие JS чтобы отследить событие ЗАЖАТОЙ движение мыши?

https://learn.javascript.ru/mouse-events-basics

Как правильно сверстать footer?

Waniman,
1. Обязательно проверяйте свой код валидатором https://validator.w3.org/nu/
Нарушать можно, только если вы очень хорошо понимаете что именно и зачем делаете.

Дочерними элементами теги ul могут быть только li.
А ссылки уже внутри li.

2. Верстка флоатами уже давно не используется.
В современном мире флоаты используются исключительно по назначению.

А для верстки используют flex и grid.

В вашем случае достаточно flex'а, но и grid пойдет.

Почитайте
https://html5book.ru/css3-flexbox/
https://tproger.ru/translations/how-css-flexbox-works/
для лучшего понимания и закрепления есть прекрасная мини-игра https://flexboxfroggy.com/#ru

Обязательно обратите внимание на свойства flex-grow и flex-shrink.

3. Для фона обертки футера, если он растягивается на всю ширину окна, а контентный блок имеет фиксированную
или процентную ширину можно использовать такой прием с градиентом https://jsfiddle.net/k10h26nc/

4.
FinGanapre,

. пиксели использовать не нужно, если это будет адаптив.

Пиксели можно использовать, даже если это адаптив.

Как узнать, что низ элемента стал отдаляться от нижней части экрана?

Берете высоту окна, высоту блока и прокрутку блока.
Считаете.

Как сделать универсальную карточку?

forspamonly2,

вообще-то можно и с ховером

да, это веселенький вариант. Чем больше блоков в ряду, тем веселее. Но тем не менее он есть.

а вот насчёт того, чем правильно такие штуки верстать - это вопрос холиварный на самом деле.

Угу, сначала знать бы что на самом деле у ТС.
Но мы не будем холиварить.

Думаю, что мы уже достаточно понаписали для развития кругозора у населения.
Спасибо.

Почему модальное окно не показывается?

Ily4farmer дополнила ответ

Как правильно сверстать данный логотип?

Логотип это принципиально одна картинка, по возможности, в SVG.

Если это нечто, состоящее из логотипа и двух текстов

<a class="logo" href="/">
   <svg> (либо img)
   <div>
      <span class="logo__title">РемСтрой-1</span>
      <span class="logo__subtitle">Фундаменты под ключ</span>   
   </div>
</a>

Дальше ссылке флекс.

Альтернатива: svg абсолютом и паддинг ссылке.