Я работал над меню, и оно отлично работает в Chrome / Safari.
URL-адрес http://www.penuli.nl/aboutvanwow.html.
Но ФФ затрудняет мне всплывающую подсказку.
Каждый раз, когда я наводю курсор на кнопку, все остальные кнопки (которые являются элементами div внутри элемента списка) переходят вниз к нижней части своего родительского элемента, элемента списка.
Я не могу понять, почему они это делают, поскольку все предметы достаточно велики, чтобы втиснуться друг в друга, не «подталкивая» другие предметы вокруг.
В поле для комментариев есть ссылка на иллюстрацию, которую я сделал о меню
(у меня недостаточно очков репутации для публикации изображений)
То, что делает его, возможно, немного сложнее (но это не должно иметь к этому никакого отношения), заключается в том, что кнопки анимируются на странице. Это означает, что их положение относительно.
Я нашел одно решение, благодаря вам, ребята из Stackoverflow, прочитав еще один вопрос, но это означало бы, что я должен изменить свою анимацию:
Переполнение: скрытый работает, когда я применяю его к элементу списка, но у меня есть анимация после событий щелчка, которая заставляет все кнопки «падать» вниз по странице. Когда ничего не работает, я, конечно, могу отменить эту анимацию, более важно, чтобы сайт работал аккуратно, чем анимация более или менее, но решение, которое работает для обеих сторон, было бы превосходным!
Заранее спасибо.
Немного CSS (без строк для начальной и конечной анимации):
#wrap ol#menu{
margin-left: 0;
padding-left: 0;
width: 1000px;
height: 160px;
}
#wrap ol#menu li{
display: inline-block;
list-style-type: none;
width: 138px;
height: 160px;
background-image: url("/images/backgroundbutton.png");
background-repeat:no-repeat;
background-color: white;
cursor: pointer;
position: relative;
z-index: 0;
}
#wrap ol#menu li .button{
width: 138px;
height: 82px;
z-index: 2;
position: relative;
background-repeat:no-repeat;
}
ol#menu li:nth-child(7n+1) .button {
background-image: url("/images/button-1.png");
}
#wrap ol#menu li .tooltip{
background-image: url("/images/tooltip.png");
position: relative;
background-repeat:no-repeat;
top: -30px;
width: 138px;
height: 130px;
z-index: 1;
display: none;
}