Jump to content
Sign in to follow this  
Vanoid

Меню в несколько строк: проблемы с прозрачностью

Recommended Posts

Стандартное меню в одну строчку работает отлично. У меня категорий много, поэтому пришлось сделать меню аж в три строки. Подправил немного stylesheet.css (в т.ч. height: 90px; и padding подуменьшил).

Выглядит хорошо, но вот незадача: при наведении на пункт меню (топовая категория), если оно не в нижней строке, то категории, которые находятся в строках ниже "просвечивают" через список подменю. Более того- выбрать пункт в подменю не получается, т.к. при перемещении мыши выбирается другой пункт из топовых категорий (а не подкатегорий).

В .css не силён (никак), но, подозреваю, что лечится это не сложно. Подскажите- как?

Скриншот:

post-26669-0-54291100-1353503831_thumb.jpg

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

Edited by Vanoid

Share this post


Link to post
Share on other sites

В CSS значение z-index сделайте побольше к элементу, который надо вывести наверх.

Share this post


Link to post
Share on other sites

Попробовал сейчас поменять z-order, которые там указаны на самый большой, который нашёл в css (99). Не помогло. Потом поставлял z-order: 99; по очереди в каждую секцию #menu. Тоже эффекта не возымело. Хотя если поменять цвет или шрифт в этих секциях- эффект есть. Подозреваю, что само поле (фон) меню задаётся одной и той же секцией и имеет одинаковый z-order.

Share this post


Link to post
Share on other sites

Ура! Спасибо! Оказывается z-index не работает, если не задан position. В итоге я просто добавил пару строк

position: relative;
z-index: 99; (вообще-то можно и поменьше)
в секцию #menu > ul > li:hover и всё заработало! Спасибо 12strun за наводку на хороший хелп по z-index

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.