Сообщений в теме: 5

[dmitriy-1]

Доброго дня!

Уважаемые модераторы, помогите пожалуйста.

У меня тема "Радость", но меню "Каталог" я взял из темы "Вечность" - т.е. горизонтальное, а было вертикальное.

У меня проблема с css выпадающих менюшек, они выпадают все в одном и том же месте. Стоит position: absolute и отступ слева. На других сайтах смотрел, сравнивал, менял, переделывал - пока не могу разобраться.

Главный вопрос: почему выпадающие пункты меню - выпадают в одном и том же месте, а не под своими пунктами.

Заранее спасибо!

http://bambo6.storeland.ru/

[sengun]

dmitriy-1 (27 Март 2014 - 14:50) писал:

Доброго дня!

Уважаемые модераторы, помогите пожалуйста.

У меня тема "Радость", но меню "Каталог" я взял из темы "Вечность" - т.е. горизонтальное, а было вертикальное.

У меня проблема с css выпадающих менюшек, они выпадают все в одном и том же месте. Стоит position: absolute и отступ слева. На других сайтах смотрел, сравнивал, менял, переделывал - пока не могу разобраться.

Главный вопрос: почему выпадающие пункты меню - выпадают в одном и том же месте, а не под своими пунктами.

Заранее спасибо!

http://bambo6.storeland.ru/

Здравствуйте.
Для выпадающих меню прописано абсолютное позиционирование (position: absolute), что означает, что его отступы будут считаться от того родительского элемента, у которого прописан атрибут position. В вашем случае он прописан у контейнера сайта. Т.е. для каждого выпадающего меню отступ слева считается от левой части сайта, поэтому они и выводятся в одном месте. Чтобы каждый из них выводился под соответствующим пунктом, надо для этих пунктов задать position

.nav li {position: relative; display: inline-block;}

Далее для выпадающих меню надо задать нулевой отступ слева. Т.е. вместо

.nav li:hover ul{ /* Выводим выпадающий пункт при наведении курсора */
position: absolute;
left: 229px;
display: block !important;
z-index: 50; /* Приносим его обратно на экран, когда нужно */
box-shadow: -1px 1px 2px #8B8B8B;
}

пропишите такой код

.nav li:hover ul{ /* Выводим выпадающий пункт при наведении курсора */
position: absolute;
left: 0px;
display: block !important;
z-index: 50; /* Приносим его обратно на экран, когда нужно */
box-shadow: -1px 1px 2px #8B8B8B;
}

И чтобы эти пункты не скрывались свойством одного из родительских элементов, надо заменить

#bar { background: url('{ASSETS_IMAGES_PATH}') center top repeat-x #fff; height: 41px; width: 99%; z-index:22; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; border: 1px solid #ccc;margin: 0 auto;margin-bottom: 10px;}

на

#bar { background: url('{ASSETS_IMAGES_PATH}') center top repeat-x #fff; height: 41px; width: 99%; z-index:22; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; border: 1px solid #ccc;margin: 0 auto;margin-bottom: 10px; overflow: visible;}

[dmitriy-1]

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

[dmitriy-1]

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

Ставил display: block где только мог, на height тож не реагирует. Снова в ступоре. http://bambo6.storeland.ru/

[sengun]

dmitriy-1 (28 Март 2014 - 18:22) писал:

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

Ставил display: block где только мог, на height тож не реагирует. Снова в ступоре. http://bambo6.storeland.ru/

Для

.nav li:hover ul li:hover li

используйте

position: relative;

[dmitriy-1]

все было так просто. Спасибо еще раз.