I have been working on a menu and have successfully implemented it in Chrome and Safari. You can view the menu at .
However, I am facing issues with Firefox when it comes to the tooltip feature. Every time I hover over a button, the other buttons (which are divs inside list items) shift to the bottom of their parent list item. This behavior puzzles me as all the items should fit without affecting each other's position.
A LINK TO AN ILLUSTRATION OF THE MENU CAN BE FOUND IN THE COMMENT BOX (since I lack enough reputation points to post images)
The situation is slightly complicated by the fact that the buttons animate into the page, resulting in their relative positioning. But this shouldn't cause the issue.
I came across a solution on Stackoverflow that involved applying 'overflow: hidden' to the list item, but this may require altering my animation. Although I can sacrifice the animation for functionality, a solution that addresses both would be ideal! Thank you in advance.
Here is some CSS code (excluding certain lines for animation):
#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;
}