Question

I have a problem with css popup. I am hidden some content in span tags and show it when I hover over a text. But there is a overlap and the text in the second line is overlapping the popup. And the border for the popup is messed up. The content is on this link. And I am using following css:

 .rest-cat 
 {  
clear: both;
padding: 3px 40px 0 0!important;
width: 600px;
 }
.rest-menuitem 
{
position: static;

float: left;
width: 254px;
padding: 3px 5px 0 0!important;
border-top: 1px dotted #DDD;
}

.dishname{
position: absolute;
z-index: 0;
float: left;
width: 229px;
 }

.dishprice{
position: relative;
float: right;
width: 25px;
 }



.product
{
    width: 600px;
padding: 0px 0px 20px 20px!important;

} 

.dishname span
{
display: none;
text-decoration: none;
}

.dishname:hover 
{
overflow: hidden;
text-decoration: none;
}

.dishname:hover span
{
display: block;
position: static;
top: 0px;
left: 170px;
width: 320px;
margin: 0px;
padding: 10px;
color: #335500;
font-weight: normal;
background: #e5e5e5;
text-align: left;
border: 1px solid #666;
z-index: 200;
}

Is there a easy fix for this? I already tried using position: relative; and added z-index to all the CSS tags. They didn’t work and I am stuck on it for a day.

Answer 1

The reason your popups are being clipped is because of this CSS:

.dishname:hover {
    overflow: hidden;
}

Removing that would be a good place to start.

Next, z-index only affects elements with a position property other than static. Use relative and they will render the same but the z-index will have an effect.

After that there are a lot of different things that could be affecting the layering I would start like @Michael Rader said by cleaning up your HTML, you have a lot of unnecessary wrappers.