проблема позиционирования (перекрытие всплывающих окон css)

Question

У меня проблема с всплывающим окном css.Я скрыл некоторый контент в тегах span и показываю его, когда нахожу текст.Но есть совпадение, и текст во второй строке перекрывает всплывающее окно.И граница для всплывающего окна перепутана.Содержимое на этой ссылке .И я использую следующие 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;
}

Есть ли легкое решение для этого?Я уже пытался использовать положение: относительный;и добавил z-index для всех тегов CSS.Они не работали, и я застрял на день.

Answer 1

Причина, по которой ваши всплывающие окна обрезаются, заключается в следующем CSS:

.dishname:hover {
    overflow: hidden;
}

Удаление этого было бы хорошим началом.

Далее z-index влияет только на элементы со свойством position, отличным от static. Используйте relative, и они будут отображаться одинаково, но z-индекс будет иметь эффект.

После этого есть много разных вещей, которые могут повлиять на многоуровневую структуру. Я начну, как сказал @Michael Rader, очищая ваш HTML, у вас много ненужных упаковщиков.