Карты Google внутри скрытого меню

У меня странная проблема - у меня есть выпадающее меню, которое запускается при наведении курсора. Элементами являются карты Google и два подменю с содержимым. При наведении над надписями меню выпадающие меню работают нормально. Но при наведении курсора на пустое пространство под меню карты Google становятся видимыми. Я попытался установить z-index соответственно, но это не поможет.Карты Google внутри скрытого меню

Demo jsfiddle: Jsfiddle

Я хотел бы сохранить меню HTML/CSS только поэтому любая помощь без решения браузера appriciated, спасибо.

Редактировать: нельзя использовать display: свойство, чтобы скрыть карту и показать ее снова, поскольку мне нужно, чтобы меню было переписано css3.

источник

2015-02-05 g5wx

http://jsfiddle.net/q8r4j7wt/1/ просто попробовать это – Sydonia

спасибо, я забыл упомянуть, что я не могу использовать дисплей: нет/блок, как мне нужно только непрозрачность и видимость, поэтому я могу перейти к пункту. – g5wx

Вы используете видимость и непрозрачность, чтобы скрыть их. Это означает, что элементы находятся там, где вы их позиционировали, вы просто не можете их видеть.

Таким образом, они получают полный диапазон событий мыши.

Вам необходимо разместить их со страницы и вернуть их обратно, когда вы хотите их показать.

.item { 
    position: absolute; 
    top: 32px; 
    left: -999em; 
    opacity: 0; 
    width: 300px; 
    height: 200px; 
    display: block; 
    background: #eee; 
} 
.menu .nav:hover .item { 
    opacity: 1; 
    left:0; 
}

Демо на http://jsfiddle.net/q8r4j7wt/3/

источник

2015-02-05 10:46:42

Отлично работает, спасибо. – g5wx

Карты Google внутри скрытого меню

ответ

Смежные вопросы