Я создаю заголовок веб-страницы, который содержит меню. Цвет фона меню отличается от цвета фона головы, и для того, чтобы получить желаемую тень блока на полной голове, я создал дочерний элемент div, который заполняет всю область родительского элемента div, и добавил тень блока. к этому.
Проблема в том, что события мыши больше не распознаются, так как над ними есть div. Как я могу добиться того, чтобы я все еще мог зависать и щелкать по меню?
http://jsfiddle.net/5u9yy/1/ - http://jsfiddle.net/5u9yy/13/
PS: я очень ценю советы по улучшению макета HTML и CSS.
PS 2: Странно, это выглядело замечательно в самом Firefox, но с JSFiddle, обернутым вокруг него, появляются некоторые проблемы .. (ul высота, ширина головы)
Редактировать : Добавлена обновленная паста 13 , где ul не прозрачен для лучшей демонстрации. Ящик-тень должен быть нанесен поверх ul!
Решение (благодаря TheWaxMan):
Вместо того, чтобы добавлять div выше всего, чтобы добавить тень для вставки, мы можем дать ul тень для рамки. Чтобы получить правильный эффект, добавьте дополнительный параметр к свойству тени блока, который смещает его к внутренней части элемента, и соответственно переместите тень блока вниз.
/* mode offset-x offset-y blur offset-inner color */
box-shadow: inset 0 10px 10px -10px #000;