Слетает стиль меню. Посоветуйте как исправить.

Я так понимаю, разговор про "тень" от меню.

У этих теней стоит z-index: -500 - смотрите style.css строчки 625-626.

Я не особо в css шарю, но похоже, что фон просто эти тенюшки закрывает. Попробуйте с этим z-index поиграться или фон как-то по-другому вставлять.

Да, речь именно про тень. Сейчас попробую использовать Ваш совет. Спасибо.

Пока безуспешно.

Друзья, а подскажите новичку, как вообще формируется подобная тень, это картинка или css, или что-то ещё.

Это css для псевдоэлементов (вроде так называется) :before и :after - тень для них делается с поворотом.

position: absolute;

в конце стилей добавьте

#container {

    background: #fff;

    position: relative;

    z-index: 1;

}

.effect-1:before, .effect-1:after {

    position: absolute;

    z-index: -1;

}

#header {

   float: none;

}

вроде бы как то так

Все советы пригодились. Большое спасибо.

Сначала пытался менять z-index для .effect-1. Если делал z-index меньше нуля - ничего не менялось, если больше нуля - получалось так:

Никак не мог добиться чтобы тени не было на самом меню. В итоге .effect-1 оставил без изменений z-index: -500;, а в #header добавил z-index: -501;.

Вроде всё работает правильно, вот мой сайт о копирайтинге, где и нужно было всё это проделать.

Единственное, мне не нравится как тень отображается в Мозиле:

На тени есть ещё какая-то полоска

Полагаю за это отвечает данный код:

.effect-1:before, .effect-1:after {content: ""; position: absolute; z-index: -500; bottom: 20px; left: 10px; width: 50%; height: 20%; max-width: 300px; -webkit-box-shadow: 0 20px 10px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0 20px 10px rgba(0, 0, 0, 0.75); box-shadow: 0 20px 10px rgba(0, 0, 0, 0.75); -webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg); -o-transform: rotate(-4deg); -ms-transform: rotate(-4deg); transform: rotate(-4deg);}
.effect-1:after {right: 10px; left: auto; -webkit-transform: rotate(4deg); -moz-transform: rotate(4deg); -o-transform: rotate(4deg); -ms-transform: rotate(4deg); transform: rotate(4deg);}

Но что в нём поменять не знаю. И возможно ли вообще убрать эту полосу?

Жаль, но нет. Рано я обрадовался. Из-за z-index: -501 в #header не работают ссылки в шапке (ссылка-картинка и поиск по сайту). Возвращаю всё обратно, - ломаю голову дальше.

#container {

    background: #fff;

    position: relative;

    z-index: 1;

}

.effect-1:before, .effect-1:after {

    position: absolute;

    z-index: -1;

}

#header {

   float: none;

}

Сделайте как я написал😒

Я пробывал, так не получалось. Спасибо, что обращаете внимание во второй раз.

Но решение всё же нашёл.

- для .effect-1 установил z-index: 1

- далее, проблема была в том, что в шаблоне для меню применялся .effect-1 и в тоже время я пытался для него установить z-index, поэтому ничего не выходило - было так:

- пришлось установить для меню z-index: 2 и обернуть его (меню) ещё одним <div> для которого применил .effect-1

Всё гораздо проще, чем думал. Проще, когда знаешь)

Надеюсь такой вариант решения приемлемый. Вот результат - http://mastersloga.ru

Вроде во всех браузерах (IE не в счёт) работает нормально. В Мозиле смотриться похуже, из-за какой-то "левой" линии, но похоже её убрать нельзя.