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 <a href="http://delivery3.water-7.com/index.php/restaurants/manufacturers/3/Barcelona-Restaurant-&-Winebar/products"> this link</a>. 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