CSS overlap help

[user899893]

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. The content is on this this link. You can see my problem when you hover over 1st menu item. 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?

[hericles]

I think it could be the position:static that is over riding your z-index element. W3C schools states that the position must be relative, absolute or fixed for z-index to work. I'm not sure how accurate that is as I've had issues with z-index not working but you might want to try it.

[user899893]

Tried that it didn't work. That's the first thing I tried