Как заставить средствами css вертикальное меню при раскрытии отодвигать следующий за ним блок?

Question

[sergey]

Собственно есть меню на сайте, и при адаптивном просмотре, когда оно раскрывается, то прячется под идущие за ним блоки (баннер). Причем когда верстал его отдельно, то все было ок. Но когда перенес на сайт вышла вот такая беда.

Comments

[sergey]

где не адаптивная? на сайте? так он только адаптивиться. А насчет высоты то да, есть такая у header

Answer 1

[Александр Гамов]

Из-за статичной высоты блока-обертки меню, оно при раскрытии вываливается за границы.
лекарство:

#nav-menu {
height: auto;
}

Answer 2

[Андрей]

Надо смотреть код. Явно путаница или с float или с position

Comments

[sergey]

весь код это очень много, что конкретно показать, что бы можно было сделать выводы?

[Therapyx]

тоже так думаю

[Therapyx]

martynuk: покажи основную структуру и заданные цсс параметры, которые могли бы влиять на это(т.е. без цвета, опасити итд)

[Андрей]

выкладывай на сайт или гит, кидай ссылку

[sergey]

ок

[dpismenny]

martynuk: без кода на гитхабе сложно что-то сказать. создайте в репозитории ветку gh-pages и бросьте сюда ссылку. ну либо на свой сервер залейте просто.

[Андрей]

делаем вып. меню шире:

строка 715

#nav-menu ul ul {
min-width: 250px;
position: absolute;
left: -9999px;
z-index: 100;
}

строка 759 - закоментить:

#nav-menu ul ul li:hover > a, #nav-menu ul ul li a:hover {
color: #00AFFF;
/* background-color: rgba(0, 0, 0, 0.4); */
}

[sergey]

Сделал, но это не решило проблему:) меню раскрывается под блоками

[Александр Гамов]

z-index ?

[sergey]

Александр Гамов: есть

[Александр Гамов]

martynuk: Все же хотелось бы код посмотреть )

[sergey]

ссылка на гитхаб https://github.com/zorro76/bar-bados рабочая область: view/theme/wine папка stylesheet файлы style.css и stylesheet.css, а также tamplate/common файлы header.tpl и home.tpl

[sergey]

Александр Гамов: сбросил ссылку

[sergey]

Денис Письменный: скинул ссылку на гитхаб

[Андрей]

еще улучшаем на большом экране take.ms/A9zgl

[Александр Гамов]

martynuk: А компилировать это нам в уме нужно ?) Имейте уважение к людям, просто сбросьте ссылку на страничку и Вам помогут в течении пары минут ) консоль всему голова.

[sergey]

Александр Гамов: 650763.itf201.web.hosting-test.net он здесь

[Александр Гамов]

martynuk:
#nav-menu {
height: auto;
}

[sergey]

чувак ты меня спас:))) как выразить благодарность?

[Александр Гамов]

martynuk: Просто закрой вопрос )
А вообще советую избегать задавать высоту и особенно ширину блокам при адаптивной верстке. К примеру у меня в последнем проекте на 2,5к строк кода всего в одном месте задана ширина (для нетипичного блока).

[sergey]

Александр Гамов: может напиши ответ отдельным коментом:) и я отмечу его решением

[sergey]

Александр Гамов: тогда еще вопрос, по футеру, он не ложится плотно к низу, ему как высоту задать?

[Андрей]

Все верно написали выше - явное указание ширины и высоты - зло. Я только для иконок прописываю

[Александр Гамов]

martynuk: Клеарфиксом сбрасывать поток, чтобы не схлопывалось, далее маргинами внешние отступы и паддингами внутренние. Я так понял у вас комбинированный фон, чтож это не проблема - htmlbook.ru/blog/dva-fona-i-bolshe Применяйте сразу к обертке и не плодите кучу вложенных блоков :)

[Александр Гамов]

martynuk: А кажется понял о чем вопрос )
.footer .container_footer > ul {
padding: 28px 0px;
margin-top: 30px; <--- это он виноват.
}

[Александр Гамов]

+ последний параграф () в блоке #main с его дефолтными маргинами.

[sergey]

Александр Гамов: разобрался, спасибо.

[Александр Гамов]

martynuk: Всегда пожалуйста :) Если что обращайтесь, в вк ник такойже.

[dpismenny]

martynuk: как только выложил нормально код — сразу помогли ;)

[sergey]

Александр Гамов: ок договорились!

[sergey]

Александр Гамов: Александр нужна ваша помощь, я задал вопрос по футеру в ленте.

Answer 3

[Глюкъ Виртуален]

Без кода никак.
Зайдем с другой стороны. Найдите слово "ПРОИЗВОДСТВО" в левой колонке: motokofr.com , наведите мышь на список производителей.
Вам такой эффект нужен? Можете взять оттуда.